Untitled Document

Справочник по тегам HTML

Тег A

Описание
Тег A является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения параметра href используется адрес документа (URL), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис
<a href=URL>...</a>
<a name=идентификатор>...</a>

Закрывающий тег
Обязателен.

Параметры
href — задает адрес документа, на который следует перейти.
name — устанавливает имя якоря внутри документа.
target — имя окна или фрейма, куда браузер будет загружать документ.

Пример
<html>
<body>

<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>
<a href=tip.html>Как сделать такое же фото?</a>

</body>
</html>

Описание параметров тега A

Параметр HREF

Описание
Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью параметра target.

Синтаксис
<a href=URL>...</a>

Обязательный параметр
Да.

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример
<html>
<body>
<a href=../wormik/knob.html>Относительная ссылка</a><br>
<a href=http://www.htmlbook.ru/wormik/knob.html>Абсолютная ссылка</a><br>
</body>
</html>

Параметр NAME

Описание
Параметр name используется для определения закладки внутри страницы. Вначале следует задать в соответствующем месте закладку и установить ее имя при помощи параметра name тега А. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.

Между тегами <a name=...> и </a> текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке.

Синтаксис
<a name=закладка>...</a>

Аргументы
Любой текст с учетом регистра.

Значение по умолчанию
Нет.

Пример
<html>
<body>

<a name=top></a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

<a href=#top>Наверх</a>

</body>
</html>

Параметр TARGET

Описание
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target тега А.

Синтаксис
<a target=имя окна>...</a>

Аргументы
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно.
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Значение по умолчанию
_self

Пример
<html>
<body>

<a href=new.html target=_blank>Открыть в новом окне</a>

</body>
</html>

Справочник по тегам HTML. Версия 1.0

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
www.htmlbook.ru


Тег ABBR

Описание
Тег ABBR указывает, что последовательность символов является аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.

Синтаксис
<abbr>Текст</abbr>

Закрывающий тег
Обязателен.

Параметры
title — добавляет всплывающую подсказку к тексту, в которой дается расшифровка аббревиатуры.

Пример
<html>
<head>
<style type="text/css">
ABBR {
border-bottom: 1px dashed red;
color: navy
}
</style>
</head>
<body>

<p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr> обозначает протокол, с помощью которого любые внешние программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы.</p>

</body>
</html>

CGI обозначает протокол, с помощью которого любые внешние программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы.

Примечание
Браузер Internet Explorer 6 не поддерживает тег ABBR, взамен рекомендуется использовать тег ACRONYM.

Описание параметров тега ABBR

Параметр TITLE

Описание
Расширенное описание элемента. Оно отображается на веб-странице в виде всплывающей подсказки при наведении курсора мыши на аббревиатуру.

Синтаксис
<abbr title="текст">...</abbr>

Аргументы
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию
Нет.


Тег ACRONYM

Описание
Элемент ACRONYM указывает, на то, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово. К акронимам, например, можно отнести следующие слова: СПИД, ликбез, замполит, США, DOS и т.д.

Синтаксис
<acronym>Текст</acronym>

Закрывающий тег
Обязателен.

Параметры
title — добавляет всплывающую подсказку к тексту, в которой дается расшифровка акронима.

Пример
<html>
<head>
<style type="text/css">
ACRONYM {
border-bottom: 1px dashed blue;
color: maroon
}
</style>
</head>
<body>

<p>Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами веб-страницы через <acronym title="Document Object Model, Объектная модель документа">DOM</acronym>.</p>

</body>
</html>

Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами веб-страницы через DOM.

Описание параметров тега ACRONYM

Параметр TITLE

Описание
Расширенное описание элемента. Оно отображается на веб-странице в виде всплывающей подсказки при наведении курсора мыши на акроним.

Синтаксис
<acronym title="текст">...</acronym>

Аргументы
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию
Нет.


Тег AREA

Описание
Каждый элемент AREA определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Тег AREA задает форму области, ее координаты, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере MAP, который связывает координаты областей с изображением.

Синтаксис
<map>
<area href=URL>
</map>

Закрывающий тег
Не требуется.

Параметры
alt — альтернативный текст для области изображения.
coords — координаты активной области.
href — задает адрес документа, на который следует перейти.
nohref — область без ссылки на другой документ.
shape — форма области.
target — имя окна или фрейма, куда браузер будет загружать документ.

Пример 1. Использование тега AREA

<html>
<body>

<map name=Navigation>
<area shape=poly coords=113,24,211,24,233,0,137,0 href=/inform/>
<area shape=poly coords=210,24,233,0,329,0,307,24 href=/activity/>
<area shape=poly coords=304,24,385,24,407,0,329,0 href=/depart/>
<area shape=poly coords=384,24,449,24,473,0,406,0 href=/techinfo/>
<area shape=poly coords=449,24,501,24,525,0,473,0 href=/study/>
<area shape=poly coords=501,24,560,24,583,0,525,0 href=/work/>
<area shape=poly coords=560,24,615,24,639,0,585,0 href=/misk/>
</map>

<img height=30 width=640 border=0 alt="Навигация по сайту" src=/images/menu.gif usemap=#Navigation>

</body>
</html>

Описание параметров тега AREA

Параметр HREF

Описание
Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью параметра target.

Синтаксис
<area href=URL>

Обязательный параметр
Да.

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 2. Создание ссылки

<html>
<body>
<map name=worm>
<area coords="321, 245, 100" shape=circle href=../wormik/knob.html>
</map>
<img src=/images/bigworm.gif usemap=#worm width=623 height=511>
</body>
</html>

Параметр TARGET

Описание
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target тега AREA.

Синтаксис
<area target=имя окна>

Аргументы
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно.
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Значение по умолчанию
_self

Пример 3. Открытие ссылки в новом окне

<html>
<body>
<map name=nortland>
<area coords="21, 24, 121, 124" shape=rect href=/sch/images/new.html target=_blank>
</map>
<img src=/images/piter.gif usemap=#nortland width=200 height=200>
</body>
</html>


Тег B

Описание
Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с тегом I задающим курсивное начертание (<b><i>жирный курсивный текст</i></b>).

Синтаксис
<b>Текст</b>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
font-weight

Пример. Использование тега B

<html>
<body>
<b>Lorem ipsum dolor sit amet</b><br>
<b>Lorem</b> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <b>Ut</b> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Примечание
Хотя использование тега B не осуждается в HTML 4, применение стилей предоставляет больше возможностей по управлению жирностью текста. С другой стороны, поисковые системы «любят» слова, выделенные жирным начертанием, и повышают их рейтинг.


Тег BASE

Описание
Элемент BASE определен внутри контейнера HEAD и инструктирует браузер относительно полного базового адреса текущего документа. Тег BASE предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи. Браузер ищет тег BASE, определяет полный адрес документа и корректно загружает его. Например, если адрес документа указан как <base href="http://www.megasite.ru/hzchd">, то при добавлении рисунков достаточно использовать относительный адрес <img src="/images/labuda.gif">. При этом полный путь к изображению будет http://www.megasite.ru/hzchd/images/labuda.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая веб-страница. Также можно применять и иерархическую систему пути с двоеточием. Так, если изображение добавляется как <img src="../images/labuda.gif">, то полный путь к файлу будет http://www.megasite.ru/images/labuda.gif.

Второе применение тега BASE — задание целевого окна для всех ссылок на текущей странице.

Синтаксис
<head>
<base ...>
</head>

Закрывающий тег
Не требуется.

Параметры
href — адрес, который должен использоваться для указания полного пути к файлам.
target — имя окна или фрейма, куда будет загружаться документ, открываемый по ссылке.

Пример 1. Использование тега BASE

<html>
<head>
<base target=_blank>
</head>
<body>

...

</body>
</html>

Описание параметров тега BASE

Параметр HREF

Описание
Адрес, который должен использоваться для указания полного пути к файлам. Обычно это типичный путь к текущему документу, но он может быть задан и другим, если это необходимо для организации файлов на сайте.

Синтаксис
<base href=URL>

Аргументы
Полный абсолютный путь к документу.

Значение по умолчанию
Путь к текущему файлу.

Пример 2. Установка пути к файлу

<html>
<head>
<base href=http://www.htmlbook.ru/copyright>
</head>
<body>

<img src=/images/copyleft.gif width=200 height=110>

</body>
</html>

Параметр TARGET

Описание
Вы можете определить окно, в которое будет загружаться веб-страница, открытая по ссылке. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис
<base target=имя окна>

Аргументы
В качестве аргумента используется имя окна или фрейма. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно.
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Если для тега BASE установлен параметр target=_blank, можно сделать чтобы ссылка открывалась в текущем окне, если добавить к тегу A параметр target=_self.

Значение по умолчанию
_self

Пример 3. Открытие ссылок в новом окне

<html>
<head>
<base target=_blank>
</head>
<body>
<a href=1.html>Ссылка откроется в новом окне</a>
<a href=2.html target=_self>Ссылка откроется в текущем окне</a>
</body>
</html>


Тег BASEFONT

Описание
Тег BASEFONT предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всём документе за исключением тега FONT, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере HEAD или BODY, причем несколько раз. Это позволяет изменять вид шрифта для части документа.

Синтаксис
<basefont color=... face=... size=...>

Закрывающий тег
Не требуется.

Параметры
color — цвет текста.
face — шрифт текста.
size — размер шрифта.

Аналог CSS
color
font-family
font-size

Пример 1. Использование тега BASEFONT

<html>
<body>

<basefont face="Arial, Helvetica, sans-serif" size="4" color="maroon">
<p>Добро пожаловать на мою страничку, которая оформлена с использование тега BASEFONT</p>

<p><font face="Times New Roman" color=green>Цвет изменен с помощью тега FONT</font></p>

</body>
</html>

Примечания

  • В настоящее время тег BASEFONT понимается только браузером Internet Explorer.
  • Использование этого тега осуждается спецификацией HTML, взамен рекомендуется применять стили.

Описание параметров тега BASEFONT

Параметр COLOR

Описание
Определяет цвет текста веб-страницы.

Синтаксис
<basefont color=цвет>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Цвет, установленный в браузере по умолчанию. Обычно это черный.

Пример 2. Установка цвета текста

<html>
<body>
<basefont color=#008000>
Синий цвет
<basefont color=#800000>
Красный цвет
</body>
</html>

Параметр FACE

Описание
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис
<basefont face=шрифт1, шрифт2, ...>

Аргументы
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

Значение по умолчанию
Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.

Пример 3. Изменение шрифта для текста

<html>
<body>
<basefont size="Verdana, Arial, Helvetica, sans-serif">
<h1>Duis te feugifacilisi</h1>
<basefont size="'Times New Roman', Times, serif">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</body>
</html>

Параметр SIZE

Описание
Параметр size задает размер шрифта в условных единицах.

Синтаксис
<basefont size=1 | 2 | 3 | 4 | 5 | 6 | 7>
<basefont size=+1>
<basefont size=-1>

Аргументы
Значение может быть от 1 до 7. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового.

Значение по умолчанию
Размер, установленный в браузере по умолчанию. Обычно он равен 3.

Пример 4. Изменение размера шрифта

<html>
<body>
<basefont size=+1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</body>
</html>


Тег BGSOUND

Описание
Тег BGSOUND определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью параметров тега, а также могут управляться через скрипты. Этот тег должен размещаться только в контейнере HEAD.

Пользователи, как правило, отрицательно относятся к музыке, которая играет на сайте, поэтому используйте эту возможность с осторожностью и по необходимости.

Синтаксис
<head>
<bgsound ...>
</head>

Закрывающий тег
Не обязателен.

Параметры
balance — управляет балансом звука между правой и левой колонками.
loop — сколько раз проигрывать музыкальный файл.
src — путь к музыкальному файлу.
volume — задает громкость звучания музыки.

Пример 1. Использование тега BGSOUND

<html>
<head>
<bgsound src=/music/kelise.mid loop=-1>
</head>
<body>
...
</body>
</html>

Описание параметров тега BGSOUND

Параметр BALANCE

Описание
Регулирует громкость звучания в левой и правой колонках. Этот атрибут не может быть изменен динамически с помощью скриптов.

Синтаксис
<bgsound balance=число>

Аргументы
Целое число от -10000 до 10000. Значение ноль служит для баланса громкости, отрицательные числа увеличивают громкость в левой колонке, а положительные — в правой.

Значение по умолчанию
0

Пример 2. Установка громкости в правой колонке

<html>
<head>
<bgsound src=moon.mid balance=3000>
</head>
<body>
...
</body>
</html>

Параметр LOOP

Описание
Устанавливает, сколько раз проигрывать музыкальный файл. Если аргумент отсутствует, то музыка проигрывается только один раз.

Синтаксис
<bgsound loop=число>

Аргументы
Значение 0 проигрывает файл один раз, -1 проигрывает музыку до тех пор, пока текущая веб-страница открыта. Любое целое положительное число заставляет браузер проигрывать музыкальный файл указанное число раз.

Значение по умолчанию
-1

Пример 3. Количество проигрываний музыкального файла

<html>
<head>
<bgsound src=money.mid loop=3>
</head>
<body>
...
</body>
</html>

Параметр SRC

Описание
Путь к музыкальному файлу, который будет проигрываться на веб-странице. Список допустимых типов файлов зависит от браузера и его настроек, но популярные форматы, например, MIDI поддерживается браузером без установки дополнительных плагинов.

Синтаксис
<bgsound src=URL>

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 4. Путь к файлу с музыкой

<html>
<head>
<bgsound src=intro.aif>
</head>
<body>
...
</body>
</html>

Параметр VOLUME

Описание
Задает громкость звучания музыки на веб-странице. По умолчанию уровень звука устанавливается максимальным и зависит от текущих настроек оборудования и операционной системы. Поэтому громкость можно только уменьшать, присваивая параметру volume отрицательное значение. Чем это число больше, тем тише звучит музыка на веб-странице.

Синтаксис
<bgsound volume=число>

Аргументы
Целое число от -10000 до 0. Ноль соответствует максимальной громкости звучания.

Значение по умолчанию
0

Пример 5. Изменение громкости музыки

<html>
<head>
<bgsound src=diablo.mid volume=-1000>
</head>
<body>
...
</body>
</html>


Тег BIG

Описание
Тег BIG увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега BIG увеличивает текст на одну условную единицу. Допускается применение вложенных тегов BIG, при этом размер шрифта будет больше с каждым уровнем.

На размер шрифта влияет не только заданный параметр size тега FONT, но и выбор гарнитуры шрифта. Шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Для более точного управления размером текста используйте стили.

Синтаксис
<big>Текст</big>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
font-size

Пример. Использование тега BIG

<html>
<body>
<big><big>Lorem ipsum dolor sit amet</big></big><br>
<big>Lorem</big> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <big>Ut</big> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Тег BLOCKQUOTE

Описание
Тег BLOCKQUOTE предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

Синтаксис
<blockquote>Текст</ blockquote>

Закрывающий тег
Обязателен.

Параметры
Единственный параметр cite включен в спецификацию HTML, но не поддерживается в настоящее время браузерами. Так что можно считать, что параметров у этого тега нет.

Пример. Использование тега BLOCKQUOTE

<html>
<body>
<hr>
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</blockquote>
<hr>
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Тег BODY

Описание
Элемент BODY предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег BODY также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство параметров до сих пор поддерживается разными браузерами.

Часто тег BODY используется для размещения обработчика событий, например, onLoad, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги BODY на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.

Синтаксис
<body>
...
</body>

Закрывающий тег
Не обязателен.

Параметры
alink — устанавливает цвет активной ссылки.
background — задает фоновый рисунок на веб-странице.
bgcolor — цвет фона веб-страницы.
bgproperties — определяет, прокручивать фон совместно с текстом или нет.
bottommargin — отступ от нижнего края окна браузера до контента.
leftmargin — отступ по горизонтали от края окна браузера до контента.
link — цвет ссылок.
scroll — устанавливает, отображать полосы прокрутки или нет.
text — цвет текста в документе.
topmargin — отступ от верхнего края окна браузера до контента.
vlink — цвет посещенных ссылок.

Пример 1. Использование тега BODY

<html>
<body onLoad="alert('Документ загружен')" text=navy>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>

Описание параметров тега BODY

Параметр ALINK

Описание
Устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный, когда на ссылку нажимают курсором мыши или выделяют ее с помощью клавиатуры.

Синтаксис
<body alink=цвет>...</body>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Совпадает с цветом ссылки.

Аналог CSS
BODY:active { color: цвет }

Пример 2. Изменение цвета активной ссылки

<html>
<body alink=orange>
...
</body>
</html>

Параметр BACKGROUND

Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис
<body background=URL>...</body>

Аргументы
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию
Нет.

Аналог CSS
BODY { background: url('путь к файлу') }

Пример 3. Установка фонового рисунка на веб-странице

<html>
<body background=/images/bgred.gif>
...
</body>
</html>

Параметр BGCOLOR

Описание
Устанавливает цвет фона веб-страницы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку

Синтаксис
<body bgcolor=цвет>...</body>

Аргументы
См. параметр ALINK.

Значение по умолчанию
Зависит от браузера и его версии, но обычно используется белый цвет фона.

Аналог CSS
BODY { background: цвет }

Пример 4. Установка цвета фона веб-страницы

<html>
<body bgcolor=#A0BEC4>
...
</body>
</html>

Параметр BGPROPERTIES

Описание
По умолчанию фоновый рисунок прокручивается совместно с содержанием веб-страницы. Используя параметр bgproperties можно зафиксировать фон на одном месте и, таким образом, заставить прокручиваться только контент. Подобное качество веб-страницы редко применяется для сайтов, поэтому для пользователей может показаться странным и непривычным.

Синтаксис
<body bgproperties=fixed>...</body>

Аргументы
Существует только один параметр fixed, который фиксирует фон. Если требуется убрать эту возможность, удалите параметр bgproperties у тега BODY или установите у него пустое значение — "".

Значение по умолчанию
Нет.

Аналог CSS
BODY { background-attachment: fixed | scroll }

Пример 5. Фиксирование фона

<html>
<body background=images/bbking.jpg bgproperties=fixed>
...
</body>
</html>

Примечание

  • Не все браузеры поддерживают этот параметр, например, Netscape его игнорирует.
  • Замечено, что при установке фонового рисунка на веб-странице через стили, параметр bgproperies перестает работать.

Параметр LEFTMARGIN

Описание
Определяет отступ от левого и правого края окна браузера до контента веб-страницы.

Синтаксис
<body leftmargin=число>...</body>

Аргументы
Целое положительное число, которое устанавливает отступ в пикселях.

Значение по умолчанию
10 пикселов для Windows и 8 пикселов для Macintosh.

Аналог CSS
BODY { margin: число }

Пример 6. Изменение отступа слева

<html>
<body leftmargin=0>
...
</body>
</html>

Примечание

  • Браузер Netscape не понимает параметр leftmargin, для установки отступов в нем используются параметры marginwidth — отступы по горизонтали и marginheight — отступы по вертикали.
  • Для задания отступов от правого, нижнего и верхнего края применяются, соответственно, параметры rightmargin, bottommargin и topmargin.

Параметр LINK

Описание
Устанавливает цвет не посещенных ссылок.

Синтаксис
<body link=цвет>...</body>

Аргументы
См. параметр ALINK.

Значение по умолчанию
#0000FF

Аналог CSS
BODY:link { color: цвет }

Пример 7. Установка цвета ссылок

<html>
<body link=#003366>
...
</body>
</html>

Параметр SCROLL

Описание
Параметр scroll управляет присутствием полос прокрутки в окне браузера, когда содержание веб-страницы превышает размер текущего окна. Этот параметр работает только в браузере Internet Explorer.

Синтаксис
<body scroll=yes | no>...</body>

Аргументы
yes — отображает полосы прокрутки.
no — запрещает показ полос прокрутки в окне.

Значение по умолчанию
yes

Аналог CSS
BODY { overflow: hidden }

Пример 8. Сокрытие полосы прокрутки

<html>
<body scroll=no>
...
</body>
</html>

Параметр TEXT

Описание
Устанавливает цвет текста, используемого на веб-странице по умолчанию. Цвета отдельных элементов можно легко изменять с помощью стилей.

Синтаксис
<body text=цвет>...</body>

Аргументы
См. параметр ALINK.

Значение по умолчанию
#000000

Аналог CSS
BODY { color: цвет }

Пример 9. Изменение цвета текста

<html>
<body text=maroon>
...
</body>
</html>

Параметр VLINK

Описание
Определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал».

Синтаксис
<body vlink=цвет>...</body>

Аргументы
См. параметр ALINK.

Значение по умолчанию
#551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).

Аналог CSS
BODY:visited { color: цвет }

Пример 10. Установка цвета посещенных ссылок

<html>
<body vlink=#660066>
...
</body>
</html>


Тег BR

Описание
Тег BR устанавливает перевод строки в месте, где этот тег встречается. В отличие от тега параграфа P, использование тега BR не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, с помощью параметра clear тега BR можно заставить, чтобы следующая строка начиналась ниже элемента.

Синтаксис
Текст<br> текст

Закрывающий тег
Не требуется.

Параметры
clear — cообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.

Пример 1. Использование тега BR

<html>
<body>
<b>Р.Л. Стивенсон</b><br>
Лето в стране настало,<br>
Вереск опять цветет.<br>
Но некому готовить<br>
Вересковый мед.
</body>
</html>

Результат примера

<b>Р.Л. Стивенсон</b><br>
Лето в стране настало,<br>
Вереск опять цветет.<br>
Но некому готовить<br>
Вересковый мед.

Описание параметров тега BR

Параметр CLEAR

Описание
Параметр clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен параметр align или слой, к которому применяется свойство CSS float.

Результат использования параметра clear зависит от края, по которому выравнивается элемент и значения аргумента clear. Так, если изображение выравнивается по левому краю, а значение параметра clear тега BR установлено как all или left, то текст после тега BR будет отображаться ниже рисунка. Любые другие значения параметра clear заставят текст располагаться справа от изображения и обтекать его.

Синтаксис
<BR clear=all | left | right | none>

Аргументы
all — отменяет обтекание элемента одновременно с правого и левого края.
left — отменяет обтекание с левой стороны элемента, расположенного после тега BR.
right — отменяет обтекание с правой стороны элемента.
none — отменяет действие данного свойства.

Значение по умолчанию
Нет.

Пример 2. Отмена обтекания текста

<html>
<body>
<div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

<br clear=left>
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

</body>
</html>

Примечание
Использование параметра clear в спецификации HTML 4 осуждается и взамен рекомендуется применять элемент CSS clear — BR { clear: both | left | none | right }.


Тег BUTTON

Описание
Тег BUTTON создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега INPUT (с параметром type=button | reset | submit). В отличие от этого тега, BUTTON предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег BUTTON должен располагаться внутри формы, устанавливаемой элементом FORM. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом BUTTON, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать BUTTON в контейнер FORM обязательно.

Синтаксис
<form>
<button>...</button>
</form>

Закрывающий тег
Обязателен.

Параметры
disabled — блокирует доступ и изменение элемента.
type — тип кнопки.
value — значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов.

Пример 1. Использование тега BUTTON

<html>
<body>
<p align=center>
<button>Кнопка с текстом</button>
<button><img src="/images/umbrella.gif" align=absmiddle> Кнопка с рисунком</button>
</p>
</body>
</html>

Описание параметров тега BUTTON

Параметр DISABLED

Описание
Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты.

Синтаксис
<button disabled>...</button>

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 2. Блокирование доступа к кнопке

<html>
<body>
<form>
<button>Активная кнопка</button>
<button disabled>Неактивная кнопка</button>
</form>
</body>
</html>

Результат примера

Параметр TYPE

Описание
Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

Синтаксис
<button type=button | reset | submit>...</button>

Аргументы
button — обычная кнопка.
reset — кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.
submit — кнопка для отправки данных формы на сервер.

Значение по умолчанию
button

Пример 3. Изменение типа кнопки

<html>
<body>
<form action=/cgi-bin/handler.cgi>
...
<button type=reset>Очистить форму</button> <button type=submit>Отправить форму</button>
</form>
</body>
</html>

Параметр VALUE

Описание
Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара имя/значение, где имя задается параметром name тега BUTTON, а значение — параметром value. Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также параметр value применяется для доступа к данным через скрипты.

Синтаксис
<button value=значение>...</button>

Аргументы
Любая текстовая строка.

Значение по умолчанию
Нет.

Пример 4. Установка значения кнопки

<html>
<body>
<form action=/cgi-bin/handler.cgi>
...
<button value="11111010101" name=hidden type=submit>Отправить форму</button>
</form>
</body>
</html>


Тег CAPTION

Описание
Тег CAPTION предназначен для создания заголовка к таблице и может размещаться только внутри контейнера TABLE, причем сразу после открывающего тега. Такой заголовок представляет собой текст, отображаемый перед таблицей и описывающий ее содержание.

Таблица 1. Пример создания заголовка таблицы с помощью тега CAPTION
 | Чебурашка | Крокодил Гена | Шапокляк
Съел, кг | 5 | 2 | 1
Выпил, л | 6 | 8 | 2
Смог, раз | 5 | 5 | 1

Синтаксис
<table>
<caption>Текст</caption>
...
</table>

Закрывающий тег
Обязателен.

Параметры
align — определяет выравнивание заголовка по горизонтали.
valign — устанавливает расположение заголовка до или после таблицы.

Пример 1. Использование тега CAPTION

<html>
<body>

<table width=60% border=1 cellspacing=0 cellpadding=4>
<caption align=right>
Таблица 3.2. Демонстрация катаболических процессов организма
</caption>

<tr>
<th>&nbsp;</th>
<th>Чебурашка</th>
<th>Крокодил Гена</th>
<th>Шапокляк</th>
</tr>
<tr>
<td>Съел, кг</td>
<td>5</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>Выпил, л</td>
<td>6</td>
<td>8</td>
<td>2</td>
</tr>
<tr>
<td>Смог, раз</td>
<td>5</td>
<td>5</td>
<td>1</td>
</tr>
</table>

</body>
</html>

Описание параметров тега CAPTION

Параметр ALIGN

Описание
Параметр align определяет выравнивание заголовка относительно таблицы. Результат его действия зависит от используемого браузера и установленного значения.

Синтаксис
<caption align=left | center | right | top | bottom>...</caption>

Аргументы
left — выравнивает заголовок по левому краю таблицы. Аргумент работает только в браузерах Internet Explorer и Opera 7.
right — в браузере Internet Explorer и Opera 7 располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а в Opera 6 и ниже заголовок располагается от таблицы справа.
center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
top — результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
bottom — заголовок размещается внизу таблицы по ее центру.

Значение по умолчанию
center — для браузера Internet Explorer; top — для других браузеров.

Аналог CSS
text-align

Пример 2. Выравнивание заголовка таблицы

<html>
<body>
<table width=60% border=1 cellspacing=1 cellpadding=4 align=center>
<caption align=right>
Пример таблицы
</caption>
<tr>
<th>#</th>
<th>Чебурашка</th>
<th>Крокодил Гена</th>
<th>Шапокляк</th>
</tr>
<tr>
<td>1</td>
<td>FXD</td>
<td>URN</td>
<td>LWK</td>
</tr>
</table>
</body>
</html>

Параметр VALIGN

Описание
Параметр valign предназначен для размещения заголовка до таблицы или после нее. Этот параметр работает только в браузере Internet Explorer, а для всех остальных применяется align. Тем не менее, параметр align корректно действует и для IE, поэтому сочетание параметров align и valign необходимо только для этого браузера, когда требуется одновременное выравнивание заголовка по вертикали и горизонтали.

Синтаксис
<caption valign=bottom | top>...</caption>

Аргументы
bottom — заголовок размещается под таблицей.
top — заголовок размещается перед таблицей.

Значение по умолчанию
top

Пример 3. Размещение заголовка под таблицей

<html>
<body>
<table width=60% border=1 cellspacing=1 cellpadding=4 align=center>
<caption align=bottom>
Пример таблицы
</caption>
...
</table>
</body>
</html>


Тег COL

Описание
Тег COL задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег COL можно использовать совместно с тегом COLGROUP, который задает группу колонок, обладающих общими параметрами.

Синтаксис
<table>
<col ...>
<tr><td>...</td></tr>
</table>

Закрывающий тег
Не требуется.

Параметры
align — устанавливает выравнивание содержимого колонки по краю.
span — количество колонок, к которым следует применять параметры.
valign — задает вертикальное выравнивание содержимого колонки.
width — ширина колонок.

Пример 1. Использование тега COL

<html>
<body>

<table width=700 border=0 cellpadding=5 cellspacing=0>
<col width=250>
<col width=450>
<tr>
<td bgcolor=#B0B28E valign=top>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</td>
<td bgcolor=#CCCCCC valign=top>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</td>
</tr>
</table>

</body>
</html>

Описание параметров тега COL

Параметр ALIGN

Описание
Задает выравнивание содержимого колонок по горизонтали. Этот параметр действует на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются тегом TH. Чтобы управлять выравниванием содержимого разных элементов воспользуйтесь стилями или устанавливайте параметр align для отдельных ячеек таблицы.

Синтаксис
<col align=left | center | right>

Аргументы
left — выравнивание контента по левому краю.
center — выравнивание по центру.
right — выравнивание по правому краю.

Значение по умолчанию
left

Аналог CSS
text-align

Пример 2. Выравнивание содержимого колонок

<html>
<body>

<table>
<col align=left>
<col span=3 width=50 align=center>
...
</table>

</body>
</html>

Параметр SPAN

Описание
Определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег COL работает для одной колонки. Допускается применять параметр span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.

Синтаксис
<col span=число>

Аргументы
Целое положительное значение.

Значение по умолчанию
1

Пример 3. Формирование группы колонок

<html>
<body>

<table width=700 cellspacing=0 border=1 bordercolor=black>
<col width=150>
<col span=5 width=50 align=center>
<col span=4 width=75 align=center>
<tr>
<td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
<td>1998</td><td>1999</td><td>2000</td><td>2001</td>
<td>2002</td><td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>

</body>
</html>

Параметр VALIGN

Описание
Устанавливает вертикальное выравнивание содержимого колонки. По умолчанию контент ячеек в колонке располагается по центру вертикали.

Синтаксис
<col valign=baseline | bottom | middle | top>

Аргументы
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого колонки к одной линии.
bottom — выравнивание по нижнему краю.
middle — выравнивание по середине.
top — выравнивание по верхнему краю строки.

Значение по умолчанию
middle

Пример 4. Выравнивание содержимого колонок

<html>
<body>

<table width=700>
<col width=150>
<col valign=top>
...
</table>

</body>
</html>

Параметр WIDTH

Описание
Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, параметр width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого.

Синтаксис
<col width=значение>

Аргументы
Обычно применяется любое целое значение в пикселах или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 600 пикселов, а для колонок — 1*, 2*, то в пикселах это будет соответственно 200 и 400. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.

Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.

Аналог CSS
width

Пример 5. Установка ширины колонок

<html>
<body>

<table cellpadding=10 border=1 bordercolor=red>
<col width=20%>
<col width=80%>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</table>

</body>
</html>


Тег COLGROUP

Описание
Тег COLGROUP предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся параметров, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег COLGROUP можно использовать в комбинации с тегом COL, который определяет характеристики одной или нескольких колонок.

Обычно закрывающий тег не требуется, но если COLGROUP выступает как контейнер для элементов COL, тогда следует добавить тег </colgroup> в конце группы.

Разница между свойствами тегов COLGROUP и COL не очень велика и состоит в следующем. COLGROUP позволяет объединять колонки в определенные группы, также при добавлении параметра rules=groups к тегу TABLE браузер будет рисовать линию только между колонками, созданными с помощью COLGROUP. В остальных случаях поведение колонок назначенных через элементы COLGROUP и COL идентично.

Синтаксис
<table>
<colgroup ...>
<tr><td>...</td></tr>
</table>

Закрывающий тег
Не обязателен.

Параметры
align — устанавливает выравнивание содержимого колонки по краю.
span — количество колонок, к которым следует применять параметры.
valign — задает вертикальное выравнивание содержимого колонки.
width — ширина колонок.

Пример 1. Использование тега COLGROUP

<html>
<body>

<table width=450 cellpadding=2 cellspacing=0 border=1 bordercolor=black rules=groups>
<colgroup width=150>
<colgroup span=9 align=center width=50>
<col span=5>
<col span=4>
</colgroup>
<tr>
<td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
<td>1998</td><td>1999</td><td>2000</td><td>2001</td>
<td>2002</td><td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>

</body>
</html>

Код примера по-разному интерпретируется браузерами. Так, Internet Explorer и Opera правильно отображают данные, а браузер Netscape не понимает параметр align=center, задающий выравнивание по центру колонки и отрисовывает вертикальные линии совсем не между колонками, созданными через COLGROUP.

Internet Explorer 6

Internet Explorer 6

Opera 7

Netscape 7

Описание параметров тега COLGROUP

Параметр ALIGN

Описание
Задает выравнивание содержимого колонок по горизонтали. Этот параметр действует на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются тегом TH. Чтобы управлять выравниванием содержимого разных элементов воспользуйтесь стилями или устанавливайте параметр align для отдельных ячеек таблицы.

Синтаксис
<colgroup align=left | center | right>

Аргументы
left — выравнивание контента по левому краю.
center — выравнивание по центру.
right — выравнивание по правому краю.

Значение по умолчанию
left

Аналог CSS
text-align

Пример 2. Выравнивание содержимого колонок

<html>
<body>

<table>
<colgroup align=left>
<colgroup span=3 width=50 align=center>
...
</table>

</body>
</html>

Параметр SPAN

Описание
Определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег COLGROUP работает для одной колонки. Допускается применять параметр span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.

Синтаксис
<colgroup span=число>

Аргументы
Целое положительное значение.

Значение по умолчанию
1

Пример 3. Формирование группы колонок

<html>
<body>

<table width=700 cellspacing=0 border=1 bordercolor=black>
<col width=150>
<col span=5 width=50 align=center>
<col span=4 width=75 align=center>
<tr>
<td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
<td>1998</td><td>1999</td><td>2000</td><td>2001</td>
<td>2002</td><td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>

</body>
</html>

Параметр VALIGN

Описание
Устанавливает вертикальное выравнивание содержимого колонки. По умолчанию контент ячеек в колонке располагается по центру вертикали.

Синтаксис
<colgroup valign=baseline | bottom | middle | top>

Аргументы
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого колонки к одной линии.
bottom — выравнивание по нижнему краю.
middle — выравнивание по середине.
top — выравнивание по верхнему краю строки.

Значение по умолчанию
middle

Пример 4. Выравнивание содержимого колонок

<html>
<body>

<table width=700>
<colgroup width=150>
<colgroup valign=top>
...
</table>

</body>
</html>

Параметр WIDTH

Описание
Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, параметр width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого.

Синтаксис
<colgroup width=значение>

Аргументы
Обычно применяется любое целое значение в пикселах или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 804 пиксела, а для колонок — 1*, 2*, 3*, то в пикселах это будет соответственно 134, 268 и 402. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.

Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.

Аналог CSS
width

Пример 5. Установка ширины колонок

<html>
<body>

<table width=600 cellpadding=2 cellspacing=0 border=1 bordercolor=black rules=groups>
<colgroup width=2*>
<colgroup span=2 align=center width=1*>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</table>

</body>
</html>

Ширина первой колонки в примере будет в два раза больше остальных колонок таблицы.


Тег DIV

Описание
Элемент DIV является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.

Как и при использовании других блочных элементов, содержимое тега DIV всегда начинается с новой строки. После него, также, добавляется перенос строки.

Синтаксис
<div>...</div>

Закрывающий тег
Обязателен.

Параметры
align — задаёт выравнивание содержимого тега DIV.
title — добавляет всплывающую подсказку к содержимому.

Пример 1. Использование тега DIV

<html>
<head>
<style>
.block1 { width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left }
.block2 { width: 200px; background: #fc0; padding: 5px; border: solid 1px black; position: relative; top: 40px; left: -30px; }
</style>
</head>
<body>

<div class=block1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
<div class=block2>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

</body>
</html>

Описание параметров тега DIV

Параметр ALIGN

Описание
Выравнивание содержимого контейнера DIV по краю.

Синтаксис
<div align=left | center | right | justify>...</div>

Аргументы
left — выравнивание по левому краю;
center — выравнивание по центру;
right — выравнивание по правому краю;
justify — выравнивание по ширине (одновременно по правому и левому краю).

Значение по умолчанию
left

Аналог CSS
text-align

Пример 2. Выравнивание содержимого элемента

<html>
<body>
<div align=justify>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
</body>
</html>

Параметр TITLE

Описание
Добавляет поясняющий текст к контейнеру DIV в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом.

Синтаксис
<div title="текст">...</div>

Аргументы
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию
Нет.

Пример 3. Создание всплывающей подсказки

<html>
<body>
<div title="Каноническая рыба">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.


Тег EM

Описание
Тег EM предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

Синтаксис
<em>Текст</em>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
font-style: italic

Пример. Использование тега EM

<html>
<body>
<em>Lorem ipsum dolor sit amet</em><br>
<b><em>Lorem</em></b> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <em>Ut</em> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Примечание
Следует отметить, что теги i и em, также как b и strong, несмотря на сходство результат, являются не совсем эквивалентными и заменяемыми. Первый тег i — является тегом физической разметки и устанавливает курсивный текст, а тег EM — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов I и EM, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.


Тег FIELDSET

Описание
Элемент FIELDSET предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащих большое число данных. Например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.

Браузеры для повышения наглядности отображают результат использования тега FIELDSET в виде рамки. Ее вид зависит от операционной системы, а также используемого браузера (рис. 1).

Рис. 1. Результат использования тега FIELDSET в браузере Internet Explorer 6 под Windows XP

Рис. 1. Результат использования тега FIELDSET в браузере Internet Explorer 6 под Windows XP

Синтаксис
<form>
<fieldset>...</fieldset>
</form>

Закрывающий тег
Обязателен.

Параметры
align — определяет выравнивание группы по краю формы.
title — добавляет всплывающую подсказку к группе формы.

Пример 1. Использование тега FIELDSET

<html>
<body>

<form>
<fieldset>
<legend>Работа со временем</legend>
<input type=checkbox> создание пунктуальности (никогда не будете никуда опаздывать);<br>
<input type=checkbox> излечение от пунктуальности (никогда никуда не будете торопиться);<br>
<input type=checkbox> изменение восприятия времени и часов.
</fieldset>
</form>

</body>
</html>

Описание параметров тега FIELDSET

Параметр ALIGN

Описание
Задает выравнивание группы по краю формы. По умолчанию группа, созданная с помощью тега FIELDSET, занимает 100% от ширины формы, поэтому добавление параметра align не приведет к заметному эффекту. Результат этого параметра будет проявляться только в случае, когда ширина формы (тег FORM) и блока FIELDSET различается. Используя стили и атрибут width можно указать разную ширину, и тогда параметр align будет выравнивать блок внутри формы. Такой же результат можно получить и путем применения свойства CSS text-align.

Синтаксис
<fieldset align=left | center | right>...</fieldset>

Аргументы
left — выравнивание группы по левому краю формы.
center — выравнивание по центру.
right — выравнивание по правому краю.

Значение по умолчанию
left

Пример 2. Выравнивание группы

<html>
<body>

<form style="width: 600px; background: #f0f0f0; padding: 10px">
<fieldset style="width: 50%" align=right>
<input type=checkbox> создание пунктуальности (никогда не будете никуда опаздывать);<br>
<input type=checkbox> излечение от пунктуальности (никогда никуда не будете торопиться);<br>
<input type=checkbox> изменение восприятия времени и часов.
</fieldset>
</form>

</body>
</html>

Параметр TITLE

Описание
Добавляет поясняющий текст в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на группе формы (рис. 2).

Рис. 2. Всплывающая подсказка

Рис. 2. Всплывающая подсказка

Синтаксис
<fieldset title="текст">...</fieldset>

Аргументы
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию
Нет.

Пример 3. Создание всплывающей подсказки

<html>
<body>
<form>
<fieldset title="Работа со временем">
...
</fieldset>
</form>
</body>
</html>


Тег FONT

Описание
Тег FONT представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

Синтаксис
<font>Текст</font>

Закрывающий тег
Обязателен.

Параметры
color — цвет текста.
face — шрифт текста.
size — размер шрифта.

Пример 1. Использование тега FONT

<html>
<body>
<font size=5 color=red face=Arial>П</font>ервая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной в размерах.
</body>
</html>

Описание параметров тега FONT

Параметр COLOR

Описание
Устанавливает цвет текста внутри контейнера FONT.

Синтаксис
<font color=цвет>...</font>

Аргументы
Для задания цветов применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Десятичная система, хотя и более привычна для представления, находит применение только с помощью CSS.

Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. В таблице приведено соответствие десятичных и шестнадцатеричных чисел.

Десятичные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
Шестнадцатеричные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999.

Типичный цвет выглядит следующим образом.

<font color=#FA8E47>Текст</font>

Цвет фона задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

FA + 8E + 47 = FA8E47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, в модели RGB количество цветом может быть 256 х 256 х 256 = 16.777.216 комбинаций.

Аналог CSS
color

Значение по умолчанию
Цвет, установленный в браузере по умолчанию.

Пример 2. Цвет фона текста

<html>
<body>
<font color=crimson>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</font>
</body>
</html>

Параметр FACE

Описание
Параметр face служит для задания гарнитуры шрифтов, использующихся для текста. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку.

Синтаксис
<font facer=шрифт1, шрифт2,...>...</font>

Аргументы
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

Аналог CSS
font-family

Значение по умолчанию
Шрифт, установленный в браузере по умолчанию.

Пример 3. Изменение шрифта

<html>
<body>
<font face="Arial, Helvetica, sans-serif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</font>
</body>
</html>

Параметр SIZE

Описание
Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size, но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.

Синтаксис
<font size=число>...</font>

Аргументы
Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.

Аналог CSS
font-size

Значение по умолчанию
3

Пример 4. Размер текста

<html>
<body>
<font size=1>Шрифт размера 1</font><br>
<font size=-1>Шрифт размера 2</font><br>
<font size=3>Шрифт размера 3</font><br>
<font size=+1>Шрифт размера 4</font><br>
<font size=5>Шрифт размера 5</font><br>
<font size=6>Шрифт размера 6</font><br>
<font size=7>Шрифт размера 7</font>
</body>
</html>


Тег FORM

Описание
Тег FORM устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.

Когда форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега FORM. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега INPUT, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

http://www.htmlbook.ru/cgi-bin/handler.cgi? nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Синтаксис
<form>
...
</form>

Закрывающий тег
Обязателен.

Параметры
action — адрес CGI-программы или документа, которые обрабатывает данные формы.
enctype — MIME-тип информации формы.
method — метод протокола HTTP.
name — имя формы.
target — имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Пример 1. Использование тега FORM

<html>
<body>

<form action="/cgi-bin/handler.cgi">
<b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b><br>
<input type=radio name=answer value=a1>Офицерский состав<br>
<input type=radio name=answer value=a2>Операционная система<br>
<input type=radio name=answer value=a3>Большой полосатый мух
</form>

</body>
</html>

Описание параметров тега FORM

Параметр ACTION

Описание
Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Синтаксис
<form action=URL>...</form>

Аргументы
В качестве значения принимается полный или относительный путь к серверному файлу (URL).

Значение по умолчанию
Нет.

Пример 2. Добавление обработчика формы

<html>
<body>
<form action=http://www.htmlbook.ru/download/file.php>
...
</form>
</body>
</html>

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте параметр enctype="text/plain" в теге FORM.

Пример 3. Использование адреса электронной почты

<html>
<body>
<form action=mailto:vlad@htmlbook.ru enctype="text/plain">
...
</form>
</body>
</html>

Параметр ENCTYPE

Описание
Устанавливает MIME-тип для данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (INPUT type=file), следует определить параметр enctype как multipart/form-data.

Синтаксис
<form enctype=MIME-тип>...</form>

Аргументы
Имя MIME-типа в любом регистре. Допускается устанавливать сразу несколько значений, разделяя их запятыми.

Значение по умолчанию
application/x-www-form-urlencoded

Пример 4. Изменение типа данных

<html>
<body>

<form action=/cgi-bin/handler.cgi enctype="multipart/form-data" method=POST>
...
</form>

</body>
</html>

Параметр METHOD

Описание
Метод сообщает серверу о цели запроса. Различают два основных метода: GET и POST. Существуют и другие методы, но они пока мало используются.

Синтаксис
<form method=get | post>...</form>

Аргументы
Значение параметра method не зависит от регистра и его следует указывать без кавычек. Различают два метода — GET и POST.

GET
Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.

POST
Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д

Значение по умолчанию
GET

Пример 5. Метод отправки формы

<html>
<body>
<form action=/cgi-bin/handler.cgi method=POST>
...
</form>
</body>
</html>

Параметр NAME

Описание
Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты.

Синтаксис
<form name=имя>...</form>

Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в параметре name.

Значение по умолчанию
Нет.

Пример 6. Использование имени формы

<html>
<head>
<script language="JavaScript">
function validForm() {
alert("Имя " + document.forms('form1').nick.value)
}
</script>
</head>
<body>
<form action=/cgi-bin/handler.cgi name=form1>
Имя: <input type=text name=nick>
<input type=button onClick="validForm()" value="OK">
</form>
</body>
</html>

Параметр TARGET

Описание
После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис
<form target=имя окна>...</form>

Аргументы
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно.
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Значение по умолчанию
_self

Пример 7. Открытие новой страницы

<html>
<body>
<form action=/cgi-bin/handler.cgi taget=_blank>
...
</form>
</body>
</html>


Тег FRAME

Описание
Тег FRAME определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере FRAMESET, который к тому же задает способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью параметра src. Хотя обязательных атрибутов у тега FRAME и нет, рекомендуется задавать каждому фрейму имя через атрибут name. Это особенно важно, если требуется по ссылке из одного фрейма загружать документ в другой.

Синтаксис
<frameset>
<frame>
</frameset>

Закрывающий тег
Не требуется.

Параметры
bordercolor — цвет линии границы.
frameborder — отображать рамку вокруг фрейма или нет.
name — задает уникальное имя фрейма.
noresize — определяет, можно изменять размер фрейма пользователю или нет.
scrolling — способ отображения полосы прокрутки во фрейме.
src — путь к файлу, предназначенному для загрузки во фрейме.

Пример 1. Использование тега FRAME

<html>
<frameset rows="80,*" cols="*" frameborder=NO border=0 framespacing=0>
<frame src=top.html name=topFrame scrolling=no noresize>
<frameset cols="80,*" frameborder=no border=0 framespacing=0>
<frame src=left.html name=leftFrame scrolling=no noresize>
<frame src=main.html name=mainFrame>
</frameset>
</frameset>
</html>

Описание параметров тега FRAME

Параметр BORDERCOLOR

Описание
Если у тега FRAMESET установлено отображение границ, то для индивидуальных фреймов их цвет можно изменить через параметр bordercolor тега FRAME. Браузеры, как правило, по-разному отображают цветную границу, например, Opera вообще игнорирует данный параметр. Если для тегов FRAMESET и FRAME рамка устанавливается разного цвета, то обычно приоритет имеет последний.

Синтаксис
<frame bordercolor=цвет>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Нет.

Аналог CSS
border

Пример 2. Изменение цвета границы между фреймами

<html>
<frameset rows="*" cols="80,*" bordercolor=black border=5>
<frame src=left.html name=leftFrame>
<frameset rows="80,*" bordercolor=black border=5>
<frame src=top.html name=topFrame bordercolor=red>
<frame src=main.html name=mainFrame>
</frameset>
</frameset>
</html>

Параметр FRAMEBORDER

Описание
Определяет, отображать границу между фреймами или нет. Браузер Opera в любом случае показывает тонкую линию, если у тега FRAMESET не задан параметр framespacing=0. Этот параметр отменяет действие атрибута frameborder у тега FRAMESET.

Синтаксис
<frame frameborder=yes | no>
<frame frameborder=1 | 0>

Аргументы
Допускается использовать значения yes или 1 для отображения границы и no или 0, чтобы ее скрыть.

Значение по умолчанию
Нет.

Пример 3. Сокрытие границ между фреймами

<html>
<frameset cols="100,*,20%">
<frame src=left.html name=leftFrame>
<frame src=main.html name=mainFrame frameborder=no>
<frame src=right.html name=rightFrame>
</frameset>
</html>

Параметр NAME

Описание
В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется параметр target тега А. В качестве значения указывается имя фрейма, в который будет загружаться документ, заданный параметром name.

Синтаксис
<frame name=имя>

Аргументы
В качестве имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в параметре name.

Значение по умолчанию
Нет.

Пример 4. Добавление имени фрейма

<html>
<frameset cols="100,*,20%">
<frame src=left.html name=leftFrame>
<frame src=main.html name=mainFrame>
<frame src=right.html name=rightFrame>
</frameset>
</html>

Параметр NORESIZE

Описание
Пользователь может изменить размер фрейма с помощью курсора мыши, активировав его на границе и перетаскивая в нужную сторону (рис. 1). Причем не имеет значения, видна граница или нет. Добавление параметра noresize запрещает эту возможность, и пользователь уже не может изменить размеры фреймов самостоятельно.

Рис. 1. Вид курсора мыши при изменении размера фрейма

Рис. 1. Вид курсора мыши при изменении размера фрейма

Синтаксис
<frame noresize>

Аргументы
У этого параметра нет значений, если он присутствует, то пользователь не может изменять размер фреймов.

Значение по умолчанию
По умолчанию размер фреймов можно изменять.

Пример 5. Запрет на изменение размера фрейма

<html>
<frameset cols="100,*>
<frame src=left.html name=leftFrame noresize>
<frame src=main.html name=mainFrame>
</frameset>
</html>

Параметр SCROLLING

Описание
Если содержимое фрейма не помещается в отведенное окно, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется параметр scrolling.

Синтаксис
<frame scrolling=auto | no | yes>

Аргументы
auto — полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
no — запрещает отображение полос прокрутки.
yes — всегда вызывает появление полос прокрутки, независимо от объема информации.

Значение по умолчанию
auto

Пример 6. Сокрытие полосы прокрутки во фрейме

<html>
<frameset cols="100,*>
<frame src=left.html name=leftFrame noresize scrolling=no>
<frame src=main.html name=mainFrame>
</frameset>
</html>

Параметр SRC

Описание
Указывает адрес файла (URL), который будет загружаться во фрейм. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис
<frame src=URL>

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 7. Путь к файлу

<html>
<frameset cols="100,*>
<frame src=/frame/left.html name=leftFrame>
<frame src=main.html name=mainFrame>
</frameset>
</html>


Тег FRAMESET

Описание
Определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега FRAME. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Тег FRAMESET заменяет собой элемент BODY на веб-странице.
Допустимо использовать вложенную структуру элементов, это позволяет разбить один фрейм на две и более области.

При использовании фреймов примите во внимание их следующие особенности.

  • Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, обычно нет ссылок на другие документы.
  • Фреймы скрывают адрес страницы на которой находится посетитель и устанавливаемый через тег TITLE, и всегда показывают только адрес сайта. По этой причине понравившуюся страницу невозможно поместить в раздел «Избранное» браузера.
  • Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
  • Большое число фреймов требует для браузера выделения больше памяти, чем обычно.

Синтаксис
<frameset>
<frame>
</frameset>

Закрывающий тег
Обязателен.

Параметры
border — толщина границы между фреймами.
bordercolor — цвет линии границы.
cols — устанавливает ширину или пропорции фреймов в виде колонок.
frameborder — отображать рамку вокруг фрейма или нет.
framespacing — аналог параметра border, задает ширину границы.
rows — задает размер или пропорции фреймов в виде строк.

Пример 1. Использование тега FRAMESET

<html>
<frameset rows="80,*" cols="*" frameborder=NO border=0 framespacing=0>
<frame src=top.html name=topFrame scrolling=no noresize>
<frameset cols="80,*" frameborder=no border=0 framespacing=0>
<frame src=left.html name=leftFrame scrolling=no noresize>
<frame src=main.html name=mainFrame>
</frameset>
</frameset>
</html>

Некоторые примеры организации фреймов приведены ниже.

Фрейм 1 | Фрейм 2
Фрейм 3 | Фрейм 4
Фрейм 5 | Фрейм 6
Фрейм 1 Фрейм 2
Фрейм 3
<frameset rows="33%,33%,*" cols="50%, 50%">
<frame src=r1c1.html name="Фрейм 1">
<frame src=r1c2.html name="Фрейм 2">
<frame src=r2c1.html name="Фрейм 3">
<frame src=r2c2.html name="Фрейм 4">
<frame src=r3c1.html name="Фрейм 5">
<frame src=r3c2.html name="Фрейм 6">
</frameset>
 <frameset rows="*" cols="80,*">
<frame src=frame1.html name="Фрейм 1">
<frameset rows="80,*">
<frame src=frame2.html name="Фрейм 2">
<frame src=frame3.html name="Фрейм 3">
</frameset>
</frameset>

Описание параметров тега FRAMESET

Параметр BORDER

Описание
Устанавливает толщину границы между фреймами. По умолчанию линия отображается трехмерной, используя параметры bordercolor и border можно настроить ее вид по своему усмотрению. Браузеры по-разному интерпретируют параметры тега FRAMESET и показывают линию. Например, для линии черного цвета толщиной 5 пикселов ее вид показан на рис. 1.

Граница в браузере Internet Explorer 6 | Граница в браузере Opera 7 | Граница в браузере Netscape 7
Internet Explorer 6 | Opera 7 | Netscape 7

Рис. 1. Вид границы в разных браузерах

Как видно из рисунка, Opera вообще не изменяет цвет линии, но исправно отображает требуемое значение. Браузер Internet Explorer за толщину принимает среднюю часть линии залитую черным цветом, а Netscape — полную ширину или высоту, включая небольшие линии по бокам, создающие эффект приподнятости.

Если у тега FRAMESET установлен параметр framespacing=0, то браузер Opera вообще не показывает границу, а Internet Exporer игнорирует значения атрибутов bordercolor и border.

Синтаксис
<frameset border=значение>...</frameset>

Аргументы
Целое положительное число. Значение 0 скрывает рамку.

Значение по умолчанию
Зависит от браузера и операционной системы.

Аналог CSS
border

Пример 2. Изменение толщины границы

<html>
<frameset rows="*" cols="80,*" bordercolor=black border=5>
<frame src=left.html name=leftFrame>
<frameset rows="80,*">
<frame src=top.html name=topFrame>
<frame src=main.html name=mainFrame>
</frameset>
</frameset>
</html>

Параметр BORDERCOLOR

Описание
Определяет цвет видимых границ между фреймами. Цвет родительского элемента FRAMESET может быть изменен с помощью дочернего тега FRAMESET или индивидуального элемента FRAME. Браузер Opera вообще игнорирует данный параметр.

Синтаксис
<frameset bordercolor=цвет>...</frameset>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Зависит от браузера и настроек операционной системы.

Аналог CSS
border

Пример 3. Изменение цвета границы

<html>
<frameset rows="*" cols="80,*" bordercolor=black border=5>
<frame src=left.html name=leftFrame>
<frameset rows="80,*" bordercolor=red border=5>
<frame src=top.html name=topFrame>
<frame src=main.html name=mainFrame>
</frameset>
</frameset>
</html>

Параметр COLS

Описание
Задает размеры или пропорции колонок фреймов в структуре FRAMESET. Если создаются несколько колонок, то для параметра cols необходимо установить определенное значение. Для этого используется три варианта:

  1. размер в пикселах;
  2. размер в процентах от доступной ширины фрейма;
  3. символ звездочки (*), который обозначает всю свободную ширину, оставшуюся после указания размеров в пикселах или процентах.

Используйте значение в пикселах, когда требуется установить размер фрейма заданной ширины. Это особенно полезно для отображения содержания заданных размеров, например, изображения. Проценты удобно применять для пропорционального разделения фреймов, в этом случае, независимо от размера окна браузера пропорции будут сохраняться, главное, чтобы суммарная ширина колонок равнялась 100%. Если значения не составляют в сумме 100%, браузер отобразит фреймы, но ширина их будет установлена не точно. Наконец, если требуется отвести оставшееся место под фрейм, то используется символ звездочки. В этом случае браузер вычисляет ширину фрейма, когда размеры для остальных фреймов уже установлены. Допускается смешивать отдельные типы значения, перечисляя их через запятую. Тогда работа по расчету нужной ширины выпадает на долю браузера.

Синтаксис
<frameset cols="ширина 1, ширина 2, ...">...</frameset>

Аргументы
Значения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *.

Значение по умолчанию
100%

Пример 4. Ширина фреймов

<html>
<frameset cols="100,*,20%">
<frame src=left.html name=leftFrame>
<frame src=main.html name=mainFrame>
<frame src=right.html name=rightFrame>
</frameset>
</html>

Параметр FRAMEBORDER

Описание
Определяет, показывать границу между фреймами или нет. Браузер Opera в любом случае демонстрирует тонкую линию, если не используется framespacing=0.

Синтаксис
<frameset frameborder=yes | no>...</frameset>
<frameset frameborder=1 | 0>...</frameset>

Аргументы
Допускается использовать значения yes или 1 для отображения границы и no или 0, чтобы ее скрыть.

Значение по умолчанию
По умолчанию этот параметр включен.

Пример 5. Сокрытие границы между фреймами

<html>
<frameset cols="100,*,20%" frameborder=no>
<frame src=left.html name=leftFrame>
<frame src=main.html name=mainFrame>
<frame src=right.html name=rightFrame>
</frameset>
</html>

Параметр FRAMESPACING

Описание
Параметр framespacing является аналогом frameborder и предназначен для установки размеров границы между фреймами. Причина существования двух разных атрибутов с близкими свойствами в том, что framespacing более старый параметр и поддерживается браузерами для совместимости с их ранними версиями.

Синтаксис
<frameset framespacing=значение>...</frameset>

Аргументы
Целое положительное число. При framespacing=0 браузер Opera полностью скрывает границы между фреймами, а Internet Explorer устанавливает их параметры по умолчанию. Этот атрибут напрочь игнорируется браузером Netscape.

Значение по умолчанию
2

Пример 6. Сокрытие границы между фреймам

<html>
<frameset cols="150,*" framespacing=0 frameborder=0>
<frame src=left.html name=leftFrame>
<frame src=main.html name=mainFrame>
</frameset>
</html>

Параметр ROWS

Описание
Задает высоту или пропорции фреймов в структуре FRAMESET в виде строк. Если создаются несколько строк, то для параметра rows необходимо установить определенное значение. Для этого используется три варианта:

  1. размер в пикселах;
  2. размер в процентах от доступной ширины фрейма;
  3. символ звездочки (*), который обозначает всю свободную ширину, оставшуюся после указания размеров в пикселах или процентах.

Удобство использования параметра rows совместно со значением * состоит в том, что фрейм можно определить в нижней части окна браузера. Когда требуется создать равномерную сетку фреймов, используйте в теге FRAMESET одновременно параметры rows и cols. Для более сложной структуры необходимо вкладывать один тег FRAMESET внутрь другого.

Синтаксис
<frameset rows="высота 1, высота 2, ...">...</frameset>

Аргументы
Значения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *.

Значение по умолчанию
100%

Пример 7. Высота фреймов

<html>
<frameset rows="*,100">
<frame src=top.html name=topFrame>
<frame src=main.html name=mainFrame>
</frameset>
</html


Теги H1...H6

Описание
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги H1...H6 относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей.

Синтаксис
<h1>Заголовок 1 уровня</h1>
...
<h6>Заголовок 6 уровня</h6>

Закрывающий тег
Обязателен.

Параметры
align — определяет выравнивание заголовка.

Пример 1. Использование тега H1

<html>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

<h2>Ut wisis enim ad minim veniam</h2>
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Примечание
Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов H1...H6. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.

Описание параметров тегов H1...H6

Параметр ALIGN

Описание
Выравнивание заголовка текста по краю.

Синтаксис
<h1 align=left | center | right | justify>...</h1>

Аргументы
left — выравнивание заголовка по левому краю.
center — выравнивание по центру.
right — выравнивание по правому краю.
justify — выравнивание по ширине (одновременно по правому и левому краю). Этот аргумент работает только для заголовка, длина которого более, чем одна строка.

Значение по умолчанию
left

Аналог CSS
text-align

Пример 2. Выравнивание заголовка

<html>
<body>
<h1 align=right>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</body>
</html>


Тег HEAD

Описание
Тег HEAD предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера HEAD находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Содержимое тега HEAD не отображается напрямую на веб-странице, за исключением тега TITLE устанавливающего заголовок окна веб-страницы.

Внутри контейнера TITLE допускается размещать следующие элементы: BASE, BASEFONT, BGSOUND, LINK, META, SCRIPT, STYLE, TITLE.

Синтаксис
<head>
...
</head>

Закрывающий тег
Не обязателен.

Пример 1. Использование тега HEAD

<html>
<head>
<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
</head>
<body>
<!-- А здесь надо размещать все, что хочется увидеть на странице. -->
</body>
</html>


Тег HR

Описание
Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег HR относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.

Синтаксис
<hr>

Закрывающий тег
Не требуется.

Параметры
align — определяет выравнивание линии.
color — цвет линии.
noshade — рисует линию без трехмерных эффектов.
size — толщина линии.
width — ширина линии.

Пример 1. Использование тега HR

<html>
<body>
<hr>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<hr>
</body>
</html>

Описание параметров тега HR

Параметр ALIGN

Описание
Выравнивание линии по краю родительского элемента. В качестве родителя обычно выступает окно браузера.

Синтаксис
<hr align=center | left | right>

Аргументы
center — выравнивание по центру.
left — выравнивание линии по левому краю.
right — выравнивание по пр авому краю.

Значение по умолчанию
center

Аналог CSS
text-align

Пример 2. Выравнивание линии

<html>
<body>
<hr align=right width=300>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</body>
</html>

Параметр COLOR

Описание
Задает цвет линии в браузере Internet Explorer. Одновременно, использование этого параметра запрещает трехмерные эффекты, словно был добавлен параметр noshade. В остальных браузерах параметр color игнорируется.

Синтаксис
<hr color=цвет>

Аргументы
Для задания цвета линии применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.

Значение по умолчанию
Нет.

Пример 3. Изменение цвета линии

<html>
<body>
<hr color=red width=300>
</body>
</html>

Параметр NOSHADE

Описание
Использование параметра noshade отменяет трехмерные эффекты, которые используются при рисовании линии по умолчанию.

Синтаксис
<hr noshade>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр не используется.

Пример 4. Отмена трехмерной линии

<html>
<body>
<hr noshade width=300>
</body>
</html>

Параметр SIZE

Описание
Устанавливает толщину линии в пикселах.

Синтаксис
<hr size=число>

Аргументы
Любое целое положительное число. Нулевое или отрицательное значение устанавливает толщину линии в один пиксел.

Значение по умолчанию
2

Пример 5. Толщина линии

<html>
<body>
<hr noshade size=10>
<hr noshade size=8>
<hr noshade size=6>
<hr noshade size=4>
<hr noshade size=2>
<hr noshade size=1>
</body>
</html>

Параметр WIDTH

Описание
Устанавливает ширину линии в процентах или пикселах. При использовании процентов за 100% берется ширина родительского элемента. Как правило, в качестве родителя выступает окно браузера.

Синтаксис
<hr width=число>

Аргументы
Любое допустимое значение в пикселах или процентах.

Значение по умолчанию
100%

Аналог CSS
width

Пример 6. Ширина линии

<html>
<body>
<hr noshade size=4 width=75%>
<hr noshade size=2 width=60%>
<hr noshade size=1 width=50%>
</body>
</html>


Тег HTML

Описание
Тег HTML является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги HEAD и BODY. Открывающий и закрывающий теги HTML в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег HTML идет в документе вторым, после определения типа документа (DTD), устанавливаемого через элемент !DOCTYPE. Тем не менее, можно использовать тег HTML и в первой строке файла, тогда браузер будет использовать DTD установленный по умолчанию. Закрывающий тег HTML должен всегда стоять в документе последним.

Синтаксис
<html>
...
</html>

Закрывающий тег
Не обязателен.

Параметры
title — добавляет всплывающую подсказку на веб-страницу.

Пример 1. Использование тега HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
</head>

<body>
<!-- А здесь надо размещать все, что хочется увидеть на странице. -->
</body>
</html

Описание параметров тега HTML

Параметр TITLE

Описание
Добавляет поясняющий текст на веб-страницу в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается в окне веб-страницы. На рис. 1 показана всплывающая подсказка в окне документа.

Рис. 1. Отображение аргумента параметра title тега HTML

Рис. 1. Отображение аргумента параметра title тега HTML

Синтаксис
<html title="текст">...</html>

Аргументы
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию
Нет.

Пример 2. Добавление всплывающей подсказки

<html title="Персональная веб-страница Вани Шапочкина">
<body>
...
</body>
</html>


Тег I

Описание
Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с тегом B задающим жирное начертание (<i><b>жирный курсивный текст</b></i>).

Синтаксис
<i>Текст</i>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
font-style: italic

Пример 1. Использование тега I

<html>
<body>
<b><i>Lorem ipsum dolor sit amet</i></b><br>
<i>Lorem</i> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <i>Ut</i> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Примечание
Хотя использование тега I не осуждается в HTML 4, применение стилей предоставляет больше возможностей по управлению начертанием текста.


Тег IFRAME

Описание
Тег IFRAME создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

Тег IFRAME является контейнером, содержание которого игнорируется браузерами, не поддерживающих данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и <iframe>.

Синтаксис
<iframe ...>... </iframe>

Закрывающий тег
Обязателен.

Параметры
align — определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
frameborder — отображать границу вокруг фрейма или нет.
height — высота фрейма.
hspace — горизонтальный отступ от фрейма до окружающего контента.
name — имя фрейма.
scrolling — способ отображения полосы прокрутки во фрейме.
src — путь к файлу, содержимое которого будет загружаться во фрейм.
vspace — вертикальный отступ от фрейма до окружающего контента.
width — ширина фрейма.

Пример 1. Использование тега IFRAME

<html>
<body>

<iframe src=banner.html width=468 height=60 hspace=10 vspace=10 align=center>
Ваш браузер не поддерживает плавающие фреймы!
</iframe>

</body>
</html>

Описание параметров тега IFRAME

Параметр ALIGN

Описание
Для плавающего фрейма можно указать его положение на веб-странице или задать способ обтекания текстом или другими элементами веб-страницы. Способ выравнивания задается параметром align тега iframe.

Синтаксис
<iframe align=absmiddle | baseline | bottom | left | middle | right | texttop | top>...</iframe>

Аргументы
В таблице 1 перечислены возможные значение параметра align и результат его использования.

Таблица 1. Использование значений параметра align
Код HTML | Описание
<iframe src=sample.gif align=absmiddle> | Выравнивание середины фрейма по середине текущей строки.
<iframe src=sample.gif align=baseline> | Выравнивание фрейма по базовой линии текущей строки.
<iframe src=sample.gif align=bottom> | Выравнивание нижней границы фрейма по окружающему тексту.
<iframe src=sample.gif align=left> | Выравнивает фрейм по левому краю окна.
<iframe src=sample.gif align=middle> | Выравнивание середины фрейма по базовой линии текущей строки.
<iframe src=sample.gif align=right> | Выравнивает фрейм по правому краю окна.
<iframe src=sample.gif align=texttop> | Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки.
<iframe src=sample.gif align=top> | Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.

Наиболее популярные параметры — left и right, создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому фрейма, рекомендуется в теге iframe добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.

Значение по умолчанию
bottom

Пример 2. Выравнивание плавающего фрейма

<html>
<body>
<iframe src=square.html width=220 height=20 align=right></iframe> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

</body>
</html>

Параметр FRAMEBORDER

Описание
По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности. Чтобы ее скрыть применяется параметр frameborder. Чтобы показать простую рамку вокруг фрейма воспользуйтесь стилями.

Синтаксис
<iframe frameborder=yes | no>...</iframe>
<iframe frameborder=0 | 1> ...</iframe>

Аргументы
yes или 1 — отображает рамку вокруг фрейма.
no или 0 — скрывает рамку вокруг фрейма.

Значение по умолчанию
1

Пример 3. Убираем рамку вокруг фрейма

<html>
<body>
<iframe src=sample.html width=340 height=50 frameborder=0 style="border: 2px solid black"></iframe>
</body>
</html>

Параметр HEIGHT и WIDTH

Описание
Для изменения размеров фрейма средствами HTML предусмотрены параметры width и height. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится тег iframe. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=100% означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300 х 150 пикселов.

Синтаксис
<iframe height=высота>...</iframe>
<iframe width=ширина>...</iframe>

Аргументы
Любое целое положительное число в пикселах или процентах.

Значение по умолчанию
width — 300 пикселов, height — 150 пикселов.

Пример 4. Изменение размеров фрейма

<html>
<body>
<iframe src=sample.html width=150 height=150></iframe>
</body>
</html>

Параметр HSPACE и VSPACE

Описание
Для любого фрейма можно задать невидимые отступы по горизонтали и вертикали с помощью, соответственно, параметров hspace и vspace. Особенно это актуально при обтекании содержимого фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на границу фрейма, необходимо вокруг него добавить пустое пространство.

Синтаксис
<iframe hspace=поля по горизонтали>...</iframe>
<iframe vspace=поля по вертикали>...</iframe>

Аргументы
Любое целое положительное число в пикселах.

Значение по умолчанию
0

Пример 5. Отступы вокруг фрейма

<html>
<body>
<iframe src=sample.html width=150 height=150 hspace=5 vspace=7></iframe>
</body>
</html>

Параметр NAME

Описание
В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name. В этом случае при создании ссылки у тега A требуется указать параметр target, в качестве значения которого выступает имя фрейма.

Синтаксис
<iframe name=имя>...</iframe>

Аргументы
Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в параметре name.

Значение по умолчанию
Нет.

Пример 6. Использование имени фрейма

<html>
<body>
<iframe name=hero src=0.html width=600 height=100 hspace=5 vspace=5 align=center>
</iframe>

<p><a href=1.html target=hero>Чебурашка</a><br>
<a href=2.html target=hero>Крокодил Гена</a><br>
<a href=3.html target=hero>Шапокляк</a>

</body>
</html>

Параметр SCROLLING

Описание
Если содержимое фрейма не помещается в отведенные размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется параметр scrolling.

Синтаксис
<iframe scrolling=auto | no | yes>...</iframe>

Аргументы
auto — полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
no — запрещает отображение полос прокрутки.
yes — всегда вызывает появление полос прокрутки, независимо от объема информации.

Значение по умолчанию
auto

Пример 7. Скрытие полос прокрутки во фрейме

<html>
<body>
<iframe src=sample.html width=150 height=450 scrolling=no></iframe>
</body>
</html>

Параметр SRC

Описание
Указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис
<iframe src=URL>...</iframe>

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 8. Путь к файлу

<html>
<body>
<iframe src=/source/sample.html width=450 height=450>
</body>
</html>


Тег IMG

Описание
Тег IMG предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег IMG в контейнер A. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border=0 в тег IMG.

Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.

Синтаксис
<img src=...>

Закрывающий тег
Не требуется.

Параметры
align — определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt — альтернативный текст для изображения.
border — толщина рамки вокруг изображения.
height — высота изображения.
hspace — горизонтальный отступ от изображения до окружающего контента.
ismap — говорит браузеру, что картинка является серверной картой-изображением.
lowsrc — путь к графическому файлу низкого разрешения для предварительного отображения.
src — путь к графическому файлу.
vspace — вертикальный отступ от изображения до окружающего контента.
width — ширина изображения.
usemap — ссылка на тег MAP, содержащий координаты для клиентской карты-изображения.

Пример 1. Использование тега IMG

<html>
<body>

<a href=lorem.html><img src=/images/lorem.gif width=135 height=28 align=right vspace=4 hspace=4 border=0></a> Lorem ipsum dolor sit amet...

</body>
</html>

Описание параметров тега IMG

Параметр ALIGN

Описание
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG.

Синтаксис
<img align=absmiddle | baseline | bottom | left | middle | right | texttop | top>

Аргументы
В таблице 1 перечислены возможные значение параметра align и результат его использования.

Таблица 1. Использование значений параметра align
Значение align | Описание | Пример
absbottom | Нижняя граница изображения выравнивается по самому нижнему краю текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...
absmiddle | Середина изображения выравнивается по средней линии текста. | Lorem ipsum dolor sit amet, consectetuer [image] adipiscing elit...
bottom или baseline | Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. | Lorem ipsum dolor sit amet, consectetuer [image] adipiscing elit...
left | Изображение располагается по левому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle | Середина изображения выравнивается по базовой линии текущей строки текста. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...
right | Изображение выравнивается по правому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
texttop | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...
top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...

Наиболее популярные параметры — left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметры hspace и vspace, задающие расстояние до текста в пикселах.

Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не описаны в спецификации HTML 4.

Значение по умолчанию
bottom

Пример 2. Выравнивание рисунка

<html>
<body>
<img src=/images/square.gif width=20 height=20 align=right> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
</body>
</html>

Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не поддерживаются спецификацией HTML 4.

Параметр ALT

Описание
Параметр alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.

Здесь должен быть рисунок, но его, увы, нет

Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

Синтаксис
<img alt="текст">

Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Значение по умолчанию
Нет.

Пример 3. Добавление альтернативного текста

<html>
<body>
<a href=/index.html><img src=home.gif alt="Вернуться на главную страницу"></a>
</body>
</html>

Параметр BORDER

Описание
Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега IMG. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. Цвет рамки в этом случае совпадает с цветом текста, заданным с помощью стиля или параметра text тега BODY.

Если изображение является ссылкой, рамка добавляется автоматически, толщина ее составляет один пиксел, а цвет рамки совпадает с цветом ссылок. Чтобы убрать рамку, следует задать параметр border=0.

Синтаксис
<img border=толщина рамки>

Аргументы
Любое целое положительное число в пикселах.

Значение по умолчанию
0

Пример 3. Рамка вокруг рисунка

<html>
<body text=#00ff00>
<img src=sample.gif width=50 height=50 border=2> рамка зеленого цвета толщиной 2 пиксела
</body>
</html>

Параметр HEIGHT и WIDTH

Описание
Для изменения размеров изображения средствами HTML предусмотрены параметры width и height. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег IMG. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=100% означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.

Синтаксис
<img height=высота>
<img width=ширина>

Аргументы
Любое целое положительное число в пикселах или процентах.

Значение по умолчанию
Исходная ширина или высота изображения.

Пример 4. Размеры изображения

<html>
<body>
<img src=sample.gif width=150 height=150>
</body>
</html>

Параметр HSPACE и VSPACE

Описание
Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

Синтаксис
<img hspace=...>
<img vspace=...>

Аргументы
Любое целое положительное число в пикселах.

Значение по умолчанию
0

Пример 5. Отступы от рисунка

<html>
<body>
<img src=sample.gif width=150 height=150 hspace=5 vspace=7>
</body>
</html>

Параметр ISMAP

Описание
Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

Отправка данных на сервер происходит следующим образом. Необходимо поместить тег IMG в контейнер A, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.

Синтаксис
<img ismap>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 6. Рисунок как карта-изображение

<html>
<body>
<a href=http://www.htmlbook.ru/cgi-bin/map.cgi><img src=sample.gif width=150 height=150 ismap></a>
</body>
</html>

Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.

Параметр LOWSRC

Описание
Параметр lowsrc используется для отображения рисунка низкого качества перед полной загрузкой конечного изображения. Такой подход предназначен для снижения времени ожидания пользователя. Предварительно ему показывается изображение в низком разрешении или черно-белый рисунок, который быстро загружается из-за небольшого исходного объема файла. Пока пользователь рассматривает его, происходит загрузка изображения хорошего качества, которое постепенно сменяет первоначальное. Размеры этих изображений обязательно должны совпадать.

Синтаксис
<img lowsrc=URL>

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 7. Путь к рисунку низкого качества

<html>
<body>
<img src=sample.jpg width=450 height=450 lowsrc=samplelow.gif>
</body>
</html>

Параметр SRC

Описание
Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.

Синтаксис
<img src=URL>

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 8. Путь к графическому файлу

<html>
<body>
<img src=sample.jpg width=450 height=450>
</body>
</html>


Тег INPUT

Описание
Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом INPUT предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент INPUT не требуется помещать внутрь контейнера FORM, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает CGI-программа, то указывать FORM обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной параметр тега INPUT, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (checkbox), флажок (radiobutton), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.

Синтаксис
<form>
<input ...>
</form>

Закрывающий тег
Не требуется.

Параметры
align — определяет выравнивание изображения.
alt — альтернативный текст для кнопки с изображением.
border — толщина рамки вокруг изображения.
checked — предварительно активированный переключатель или флажок.
disabled — блокирует доступ и изменение элемента.
maxlength — максимальное количество символов разрешенных в тексте.
name — имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly — устанавливает, что поле не может изменяться пользователем.
size — ширина текстового поля.
src — значение элемента.

Пример 1. Использование тега INPUT

<html>
<body>

<form name=test method=POST action=/cgi-bin/handler.cgi>
<p><b>Ваше имя:</b><br>
<input name=nick type=text size=40>
</p>
<p><b>Каким браузером в основном пользуетесь:</b></p>
<p>
<input type=radio name=browser value=ie> Internet Explorer<br>
<input type=radio name=browser value=nc> Netscape<br>
<input type=radio name=browser value=opera> Opera<br>
<input type=radio name=browser value=firefox> FireFox<br>
<input type=radio name=browser value=mozilla> Mozilla <br>
</p>
<p>Комментарий<br>
<textarea name=comment cols=40 rows=7></textarea>
</p>
<p>
<input type=submit value="Отправить">
<input type=reset value="Очистить">
</p>
</form>

</body>
</html>

Описание параметров тега INPUT

Параметр ALIGN

Описание
Определяет, как выравнивать поле с изображением относительно текста или других элементов формы.

Синтаксис
<input type=image align=absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top>

Применяется
<input type=image>

Аргументы
В таблице 1 перечислены возможные значение параметра align и результат его использования.

Таблица 1. Использование значений параметра align
Значение align | Описание | Пример
absbottom | Нижняя граница изображения выравнивается по самому нижнему краю текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...
absmiddle | Середина изображения выравнивается по средней линии текста. | Lorem ipsum dolor sit amet, consectetuer [image] adipiscing elit...
bottom или baseline | Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. | Lorem ipsum dolor sit amet, consectetuer [image] adipiscing elit...
left | Изображение располагается по левому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle | Середина изображения выравнивается по базовой линии текущей строки текста. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...
right | Изображение выравнивается по правому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
texttop | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...
top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, [image] consectetuer adipiscing elit...

Значение по умолчанию
bottom

Пример 2. Выравнивание поля с изображением

<html>
<body>
<form method=POST action=/cgi-bin/handler.cgi>
...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input src=send.gif width=48 height=24 type=image align=right>
</form>
</body>
</html>

Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не описаны спецификацией HTML 4.

Параметр ALT

Описание
Параметр alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

Синтаксис
<input type=image alt="Текст">

Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Значение по умолчанию
Нет.

Пример 3. Добавление альтернативного текста

<html>
<body>
<form method=POST action=/cgi-bin/handler.cgi>
...
<input src=send.gif width=48 height=24 type=image alt="Отправить форму на сервер">
</form>
</body>
</html>

Параметр BORDER

Описание
Браузеры обрабатывают изображения, добавленные через тег INPUT, подобно рисункам, созданным с помощью тега IMG. В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.

Синтаксис
<input type=image border=толщина рамки>

Аргументы
Любое целое положительное число в пикселах.

Значение по умолчанию
0

Пример 4. Добавление рамки к изображению

<html>
<body>
<form method=POST action=/cgi-bin/handler.cgi>
...
<input src=send.gif width=48 height=24 type=image border=2>
</form>
</body>
</html>

Примечание
В настоящее время этот параметр поддерживается только браузером Netscape, остальные браузеры его игнорируют и отображают изображение без рамки.

Параметр CHECKED

Описание
Этот параметр определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (checkbox), может быть отмечен только один элемент группы, для флажков (radiobutton) допустимо пометить хоть все элементы.

Синтаксис
<input type=checkbox checked>
<input type=radiobutton checked>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 5. Помечаем переключатели

<html>
<body>
<form method=POST action=/cgi-bin/handler.cgi>
<b>С какими операционными системамы вы знакомы?</b><br>
<input type=checkbox name=option1 value=a1 checked>Windows 95/98<br>
<input type=checkbox name=option2 value=a2>Windows 2000<br>
<input type=checkbox name=option3 value=a3>System X<br>
<input type=checkbox name=option4 value=a4>Linux<br>
<input type=checkbox name=option5 value=a5>X3-DOS
</form>
</body>
</html>

Параметр DISABLED

Описание
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Синтаксис
<input type=... disabled>

Применяется
Ко всем элементам формы.

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 6. Запрет доступа к форме

<html>
<body>
<form method=GET action=/cgi-bin/handler.cgi>
<input type=text size=30 onFocus="this.form.submit.disabled=0"><br>
<input type=submit name=submit value="Отправить" disabled>
</form>
</body>
</html>

Параметр MAXLENGTH

Описание
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

Синтаксис
<input type=text maxlength=число>
<input type=password maxlength=число>

Аргументы
Любое целое положительное число в символах.

Значение по умолчанию
Ввод символов не ограничен.

Пример 7. Ограничение ввода числа символов в поле

<html>
<body>
<form method=GET action=/cgi-bin/handler.cgi>
<input type=text size=30 maxlength=100><br>
<input type=submit name=submit value="Отправить">
</form>
</body>
</html>

Параметр NAME

Описание
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.

Синтаксис
<input type=... name=имя>

Применяется
Ко всем элементам формы.

Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в параметре name.

Значение по умолчанию
Нет.

Пример 8. Использование имени поля

<html>
<head>
<script language="JavaScript">

function dataField(f) {
alert("Вы ввели: " + f.comment.value);

}

</script>
</head>
<body>

<form>
<b>Введите текст</b><br>
<input type=text name=comment><br>
<input type=button value="ОК" onClick="dataField(this.form)">
</form>

</body>
</html>

Параметр READONLY

Описание
Когда к тегу INPUT добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис
<input type=text readonly>
<input type=password readonly>

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 9. Поле только для чтения

<html>
<body>

<form>
<input type=text name=comment value="Введенный текст не может изменяться" readonly>
</form>

</body>
</html>

Параметр SIZE

Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис
<input type=text size=ширина>
<input type=password size=ширина>

Аргументы
Любое целое положительное число.

Значение по умолчанию
20

Пример 10. Ширина поля

<html>
<body>

<form>
<input type=text size=40>
</form>

</body>
</html>

Параметр SRC

Описание
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате GIF и JPEG.

Синтаксис
<input type=image src=URL>

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 11. Путь к графическому файлу

<html>
<body>

<form>
...
<input type=image src=/images/send.gif>
</form>

</body>
</html>

Параметр TYPE

Описание
Сообщает браузеру, к какому типу относится элемент формы.

Синтаксис
<input type=button | checkbox | file | hidden | image | password | radio | reset | submit | text>

Аргументы
В таблице 2 перечислены возможные значение параметра type и получаемый вид поля формы.

Таблица 2. Значения параметра type
Тип | Описание | Вид
button | Кнопка. |
checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. | Пиво Чай Кофе
file | Поле для ввода имени файла, который пересылается на сервер. |
hidden | Скрытое поле. Оно никак не отображается на веб-странице. |
image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. |
password | Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. |
radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. | Пиво Чай Кофе
reset | Кнопка для возвращение данных формы в первоначальное значение. |
submit | Кнопка для отправки данных формы на сервер. |
text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. |

Значение по умолчанию
text

Пример 12. Добавление переключателей

<html>
<body>

<form action=/cgi-bin/handler.cgi>
<input type=radio name=drink value=rad1> Пиво <br>
<input type=radio name=drink value=rad2> Чай<br>
<input type=radio name=drink value=rad3> Кофе
<p><input type=image src=/images/imgbutton.gif width=91 height=25 border=0>
</form>

</body>
</html>

Параметр VALUE

Описание
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара имя/значение, где имя задается параметром name тега INPUT, а значение — параметром value.

В зависимости от типа элемента параметр value выступает в следующей роли:

  • для кнопок (input type=button | reset | submit) устанавливает текстовую надпись на них;
  • для текстовых полей (input type=password | text) указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в параметре value;
  • для флажков и переключателей (input type=checkbox | radio) уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно определить, какой пункт выбрал пользователь.

Синтаксис
<input type=... value=значение>

Применяется
Ко всем элементам формы.

Аргументы
Любая текстовая строка.

Значение по умолчанию
Нет.

Пример 13. Добавление значения поля

<html>
<body>

<form>
<b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b><br>
<input type=radio name=answer value=a1>Офицерский состав<br>
<input type=radio name=answer value=a2>Операционная система<br>
<input type=radio name=answer value=a3>Большой полосатый мух
</form>

</body>
</html>


Тег LABEL

Описание
Тег LABEL устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы INPUT. Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью LABEL можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри тега INPUT и указании его имени в качестве параметра for тега LABEL. При втором способе тег INPUT помещается внутрь контейнера LABEL.

Синтаксис
<input id=идентификатор> <label for=идентификатор>Текст</label>
<label><input type=...> Текст</label>

Закрывающий тег
Обязателен.

Параметры
accesskey — доступ к элементам формы с помощью горячих клавиш.
for — идентификатор элемента INPUT, с которым следует установить связь.

Пример 1. Использование тега LABEL

<html>
<body>

<form>
<b>Lorem ipsum dolor sit amet...</b><br>
<input type=checkbox id=check1><label for=check1>Lorem</label><br>
<input type=checkbox id=check2><label for=check2>Ipsum</label><br>
<input type=checkbox id=check3><label for=check3>Dolor</label><br>
<input type=checkbox id=check4><label for=check4>Sit amet</label>
</form>

</body>
</html>

Описание параметров тега LABEL

Параметр ACCESSKEY

Описание
Определяет горячую клавишу, с помощью которой происходит переход фокуса к элементу формы. Такая горячая клавиша должна использоваться совместно с управляющей кнопкой <Alt> и не зависит от регистра.
Параметр работает только для браузера Internet Explorer под Windows.

Синтаксис
<label accesskey=клавиша>...</label>

Аргументы
Любой доступный латинский символ.

Значение по умолчанию
Нет.

Пример 2. Добавление горячей клавиши

<html>
<body>

<form>
<input type=checkbox id=t1><label for=t1 accesskey=g>Нажмите <Alt>+<g>, чтобы перейти к разделу "Игры".</label>
</form>

</body>
</html>

Параметр FOR

Описание
Задает уникальный идентификатор, определяемый с помощью атрибута id элемента INPUT, с которым следует установить связь. Параметр for необходимо задавать в том случае, когда элемент формы и текст разделены. Если INPUT размещается внутри контейнера LABEL, то применять параметр for не требуется.

Синтаксис
<label for=идентификатор>...</label>

Аргументы
Имя идентификатора. Такое имя чувствительно к регистру, поэтому его следует писать так же, как оно описано внутри элемента INPUT.

Значение по умолчанию
Нет.

Пример 3. Добавление идентификатора поля

<html>
<body>

<form>
<input type=radio name=l id=radio1><label for=radio1>Lorem ipsum</label><br>
<input type=radio name=l id=radio2><label for=radio2>Dolor sit amet</label>
</form>

</body>
</html>


Тег LEGEND

Описание
Тег LEGEND применяется для создания заголовка группы элементов формы, которая определяется с помощью тега FIELDSET. Группа элементов, отмеченная с помощью FIELDSET, обозначается в браузере с помощью рамки, а текст, который располагается внутри контейнера LEGEND, встраивается в эту рамку (рис. 1).

Рис. 1. Результат использования тега LEGEND

Рис. 1. Результат использования тега LEGEND

Синтаксис
<fieldset>
<legend>Текст</legend>
</fieldset>

Закрывающий тег
Обязателен.

Параметры
align — определяет выравнивание текста.
title — добавляет всплывающую подсказку к тексту заголовка.

Пример 1. Использование тега LEGEND

<html>
<body>

<fieldset>
<legend>Работа со временем</legend>
<input type=checkbox> создание пунктуальности (никогда не будете никуда опаздывать);<br>
<input type=checkbox> излечение от пунктуальности (никогда никуда не будете торопиться);<br>
<input type=checkbox> изменение восприятия времени и часов.
</fieldset>

</body>
</html>

Описание параметров тега LEGEND

Параметр ALIGN

Описание
Выравнивание текста заголовка по краю. В браузере Opera атрибут не работает.

Синтаксис
<legend align=left | center | right>...</legend>

Аргументы
left — выравнивание текста по левому краю;
center — выравнивание по центру;
right — выравнивание по правому краю;

Значение по умолчанию
left

Пример 2. Выравнивание заголовка группы

<html>
<body>
<fieldset>
<legend align=right>Lorem ipsum dolor sit amet</legend>
...
</fieldset>
</body>
</html>

Параметр TITLE

Описание
Добавляет поясняющий текст в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на заголовке.

Синтаксис
<legend title="текст">...</legend>

Аргументы
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию
Нет.

Пример 3. Добавление всплывающей подсказки

<html>
<body>
<fieldset>
<legend title="Lorem ipsum...">Lorem ipsum dolor sit amet</legend>
...
</fieldset>
</body>
</html>


Тег LI

Описание
Тег LI определяет отдельный элемент списка. Внешний тег UL или OL устанавливает тип списка — маркированный или нумерованный.

Синтаксис
<ul>
<li>элемент маркированного списка</li>
</ul>

<ol>
<li>элемент нумерованного списка</li>
</ol>

Закрывающий тег
Не обязателен.

Параметры
type — устанавливает вид маркера нумерованного или маркированного списка.
value — число, с которого будет начинаться нумерованный список.

Пример 1. Использование тега LI

<html>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
</html>

Результат примера

  • Чебурашка
  • Крокодил Гена
  • Шапокляк

Примечание
Для создания маркированного списка необязательно использовать тег UL, достаточно одного тега LI.

Описание параметров тега LI

Параметр TYPE

Описание
Устанавливает вид маркера. Тип маркера и его значение зависит от внешнего контейнера UL или OL.

Синтаксис
<li type=disc | circle | square>
<li type=A | a | I | i | 1>

Аргументы
Для маркированного списка (тег UL) маркеры могут принимать один из трех видов: круг, окружность и квадрат. Значения параметра type и получаемый вид показан в табл. 1.

Таблица 1. Параметры маркированного списка
Код | Пример
<li type=disc> | Чебурашка Крокодил Гена Шапокляк
<li type=circle> | Чебурашка Крокодил Гена Шапокляк
<li type=square> | Чебурашка Крокодил Гена Шапокляк

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега OL, который и используется для создания списка. В качестве маркеров могут быть следующие значения:

  • заглавные латинские буквы;
  • прописные латинские буквы;
  • заглавные римские цифры;
  • прописные римские цифры;
  • арабские цифры.

В табл. 2 приведены различные значения параметра type тега LI и результат их применения.

Таблица 2. Параметры нумерованного списка
Код Пример
<ol>
<li type=A>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol>
<li type=a>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol>
<li type=I>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol>
<li type=i>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol>
<li type=1>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

Значение по умолчанию
disc и 1

Аналог CSS
list-style-type

Пример 2. Добавление маркеров

<html>
<body>
<li type=square>Чебурашка</li>
<li type=square>Крокодил Гена</li>
<li type=square>Шапокляк</li>
</body>
</html>

Параметр VALUE

Описание
Параметр value устанавливает номер, с которого будет начинаться список. Атрибут value применяется только для нумерованных списков, когда тег LI находится внутри контейнера OL. При этом не имеет значения, какой тип списка установлен с помощью параметра type, аргумент value одинаково работает и с римскими и с арабскими числами.

Синтаксис
<li value=число>

Аргументы
Любое целое положительное число.

Значение по умолчанию
1

Пример 3. Начальное значение списка

<html>
<body>
<ol>
<li type=I value=48>Чебурашка</li>
<li type=I>Крокодил Гена</li>
<li type=I>Шапокляк</li>
</ol>
</body>
</html>


Тег LINK

Описание
Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега A, тег LINK размещается всегда внутри контейнера HEAD и не создает ссылку.

Синтаксис
<head>
<link href=...>
</head>

Закрывающий тег
Не требуется.

Параметры
href — путь к связываемому файлу.
rel — определяет отношения между текущим документом и файлом, на который делается ссылка.
type — MIME-тип данных подключаемого файла.

Пример 1. Использование тега LINK

<html>
<head>
<link rel="stylesheet" type="text/css" href="ie.css">
<link rel="stylesheet" type="text/css" href="nc.css">
</head>
<body>
...
</body>
</html>

Описание параметров тега LINK

Параметр HREF

Описание
Путь к файлу, на который делается ссылка (URL). Браузер Netscape 4 вместо параметра href использует src, если вы ориентируете сайт на этот браузер, добавляйте оба параметра к тегу LINK. Параметр href является обязательным.

Синтаксис
<link href=URL>

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 2. Путь к файлу

<html>
<head>
<link href="http://www.htmlbook.ru/ie/rus/x3.css">
</head>
<body>
...
</body>
</html>

Параметр REL

Описание
Параметр rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ. HTML 4 различает следующие значения параметра rel: alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, index, next, prev, section, start, stylesheet, subsection. Браузеры, как правило, из этого списка понимают только параметр stylesheet.

Синтаксис
<link rel=...>

Аргументы
stylesheet — определяет, что подключаемый файл хранит таблицу стилей (CSS).

Значение по умолчанию
Нет.

Пример 3. Ссылка на файл CSS

<html>
<head>
<link rel="stylesheet" type="text/css" href="hb.css">
</head>
<body>
...
</body>
</html>

Параметр TYPE

Описание
Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Синтаксис
<link type="MIME-тип">

Аргументы
Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.

Значение по умолчанию
Нет.

Пример 4. Установка типа данных

<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles/htmlbook.css">
</head>
<body>
...
</body>
</html>


Тег MAP

Описание
Тег MAP служит контейнером для элементов AREA, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на html-документы. Цель использования тега MAP — в связывании тега IMG с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге IMG, задаваемого параметром usemap, так и в теге MAP, устанавливаемого атрибутом name.

Синтаксис
<map name=...>
<area ...>
</map>

Закрывающий тег
Обязателен.

Параметры
name — имя карты-изображения.

Пример 1. Использование тега MAP

<html>
<body>
<img src=map.gif width=411 height=46 border=0 usemap=#navigation alt="Навигация по сайту">

<map name=navigation>
<area shape=poly coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1, 115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27" href=link1.html>
<area shape=poly coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1, 206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27" href=link2.html>
<area shape=poly coords="302,27, 303,32, 394,32, 393,27, 386,9, 382,3, 375,1, 303,1, 298,2, 293,6, 295,9, 302,27" href=link3.html>
</map>

</body>
</html>

Описание параметров тега MAP

Параметр NAME

Описание
Имя идентификатора, которое однозначно определяет карту-изображение. Значение параметра name тега MAP должно соответствовать имени в usemap. При этом аргумент параметра usemap тега IMG начинается с символа решетки.

Синтаксис
<map name=идентификатор>...</map>

Обязательный параметр
Да.

Аргументы
Любое подходящее уникальное имя, оно чувствительно к регистру.

Значение по умолчанию
Нет.

Пример 2. Имя карты-изображения

<html>
<body>

<img src=/images/col3.gif" width=384 height=275 border=0 usemap=#Map>
<map name=Map>
<area shape=rect coords="257,0,383,275" href=col3.html>
<area shape=rect coords="126,0,257,276" href=col2.html>
<area shape=rect coords="0,0,126,275" href=col1.html>
</map>
</body>
</html>


Тег MARQUEE

Описание
Тег MARQUEE создает бегущую строку на странице. На самом деле содержимое контейнера MARQUEE не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

Первоначально тег MARQUEE был предназначен только для браузера Internet Explorer, но современные версии других браузеров (Netscape 6, Opera 6 и старше) также понимают и поддерживают этот тег.

Синтаксис
<marquee>...</marquee>

Закрывающий тег
Обязателен.

Параметры
behavior — задает тип движения содержимого контейнера MARQUEE.
bgcolor — цвет фона.
direction — указывает направление движения содержимого контейнера MARQUEE.
height — высота области прокрутки.
hspace — горизонтальные поля вокруг контента.
loop — задает, сколько раз будет прокручиваться содержимое.
scrollamount — скорость движения контента.
scrolldelay — величина задержки в миллисекундах между движениями.
truespeed — отменяет встроенный ограничитель скорости при низких значениях параметра scrolldelay.
vspace — вертикальные поля вокруг содержимого.
width — ширина области прокрутки.

Пример 1. Использование тега MARQUEE

<html>
<body>
<marquee behavior=alternate direction=left bgcolor=#ffcc00>
Lorem ipsum dolor sit amet...
</marquee>
</body>
</html>

Описание параметров тега MARQUEE

Параметр BEHAVIOR

Описание
Устанавливает способ движения содержимого внутри элемента MARQUEE.

Синтаксис
<marquee behavior=alternate | scroll | slide>...</marquee>

Аргументы
alternate — контент перемещается между правым и левым краем элемента.
scroll — контент перемещается в направлении, заданным параметром direction, затем скрывается за пределами области, после чего начинает движение с начала.
slide — контент перемещается в направлении, заданным параметром direction, доходит до края области и останавливается.

Значение по умолчанию
scroll

Пример 2. Установка вида движения

<html>
<body>
<marquee bgcolor=#c0c0c0 behavior=alternate>Lorem ipsum dolor sit amet...</marquee>
<marquee bgcolor=#c0c0c0 behavior=scroll>Lorem ipsum dolor sit amet...</marquee>
<marquee bgcolor=#c0c0c0 behavior=slide>Lorem ipsum dolor sit amet...</marquee>
</body>
</html>

Результат примера

alternate

scroll

slide

Параметр BGCOLOR

Описание
Устанавливает цвет фона под содержимым элемента MARQUEE.

Синтаксис
<marquee bgcolor=цвет>...</marquee>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Совпадает с цветом фона веб-страницы, обычно это белый цвет.

Пример 3. Изменение цвета фона

<html>
<body bgcolor=#c0c0c0>
<marquee bgcolor=white>Lorem ipsum dolor sit amet...</marquee>
</body>
</html>

Параметр DIRECTION

Описание
Содержимое контейнера MARQUEE может перемещаться в четырех направлениях, не только влево и вправо, но также вверх и вниз.

Синтаксис
<marquee direction=down | left | right | up>...</marquee>

Аргументы
down — движение сверху вниз.
left — справа налево.
right — в правую сторону.
up — движение вверх.

Значение по умолчанию
left

Пример 4. Изменение направления движения

<html>
<body>
<marquee direction=down bgcolor=#ffcc00>Lorem ipsum dolor sit amet...</marquee>
</body>
</html>

Параметр HEIGHT и WIDTH

Описание
Элемент MARQUEE отображается как прямоугольник, ширина и высота которого устанавливаются, соответственно, с помощью параметров width и height. Прокрутка содержимого будет происходить в пределах заданных размеров. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры MARQUEE вычисляются относительно родительского элемента, обычно это тег BODY. Иными словами, width=100% означает, что элемент будет занимать всю доступную ширину веб-страницы.

Синтаксис
<marquee height=высота>...</marquee>
<marquee width=ширина>...</marquee>

Аргументы
Любое целое положительное число в пикселах или процентах.

Значение по умолчанию
Ширина — 100%, высота — 12 пикселов.

Пример 5. Ширина и высота элемента

<html>
<body>
<marquee width=600 height=150 direction=up bgcolor=olive style="text-align: center; color: white">
Lorem ipsum dolor sit amet...
</marquee>
</body>
</html>

Параметр HSPACE и VSPACE

Описание
Параметры hspace и vspace предназначены для добавления пустого пространства вокруг содержимого MARQUEE. Атрибут hspace устанавливает поля слева и справа от элемента (по горизонтали), а vspace — сверху и снизу (по вертикали). Поля не увеличивают фоновую область под содержимым и служат для изменения расстояния между тегом MARQUEE и другими элементами веб-страницы.

Синтаксис
<marquee hspace=поле по горизонтали>...</marquee>
<marquee vspace=поле по вертикали>...</marquee>

Аргументы
Любое целое положительное число в пикселах.

Значение по умолчанию
-1

Пример 6. Отступы вокруг содержимого

<html>
<body>
<marquee width=550 height=150 hspace=5 vspace=7>
Lorem ipsum dolor sit amet...
</marquee>
</body>
</html>

Параметр LOOP

Описание
Устанавливает, сколько раз скролировать содержимое тега MARQUEE. После того, как заданное число раз отсчитано, содержимое остается в конечной точке.

Синтаксис
<marquee loop=...>...</marquee>

Аргументы
Любое целое положительное число или -1 для бесконечного воспроизведения движения.

Значение по умолчанию
-1

Пример 7. Изменение числа скролирования содержимого

<html>
<body>
<marquee loop=5 behavior=alternate>
Lorem ipsum dolor sit amet...
</marquee>
</body>
</html>

Параметр SCROLLAMOUNT

Описание
Анимация содержимого элемента MARQUEE происходит за счет периодического стирания информации и отображения ее на новом месте. Параметр scrollamount устанавливает расстояние в пикселах между старым и новым положениями, которые влияют на скорость движения и плавность хода. Чем выше значение, тем быстрее перемещается содержимое контейнера. Если значение равно нулю, то движения не происходит.

Синтаксис
<marquee scrollamount=число>...</marquee>

Аргументы
Любое целое положительное число пикселов.

Значение по умолчанию
6

Пример 8. Изменение скорости движения

<html>
<body>
<marquee scrollamount=10 behavior=alternate>
Lorem ipsum dolor sit amet...
</marquee>
</body>
</html>

Параметр SCROLLDELAY

Описание
На скорость скроллирования, как и изменение позиции, влияет частота обновления содержания. Параметр scrolldelay задает время задержки между движениями в миллисекундах, чем ниже значение, тем выше скорость движения, и наоборот.

Синтаксис
<marquee scrolldelay=число>...</marquee>

Аргументы
Любое целое положительное число миллисекунд.

Значение по умолчанию
85

Пример 9. Изменение частоты обновления содержимого

<html>
<body>
<marquee scrolldelay=100>
Lorem ipsum dolor sit amet...
</marquee>
</body>
</html>

Параметр TRUESPEED

Описание
Если содержимое тега MARQUEE перемещается слишком быстро, то срабатывает встроенный ограничитель скорости, который насильно замедляет скролирование. Это сделано для того, чтобы сохранить читабельность текста. Если вы намерены обойти это ограничение, добавьте параметр truespeed, он заставляет прокручиваться содержимое с заданной скоростью. Для параметра scrolldelay ограничение скорости начинается со значения 60 миллисекунд и ниже.

Синтаксис
<marquee truespeed>...</marquee>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 10. Ускорение скролирования содержимого

<html>
<body>
<marquee scrolldelay=30 truepeed>
Lorem ipsum dolor sit amet...
</marquee>
</body>
</html>


Тег META

Описание
META определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере HEAD. Как правило, параметры любого метатега сводятся к парам имя/значение, которые определяются аргументами content, name или http-equiv.

Синтаксис
<head>
<meta content=...>
</head>

Закрывающий тег
Не требуется.

Параметры
content — устанавливает значение параметра, заданного с помощью name или http-equiv.
http-equiv — предназначен для конвертирования метатега в заголовок HTTP.
name — имя метатега, также косвенно устанавливает его предназначение.

Пример 1. Использование тега META

<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<body>
...
</body>
</html>

Описание параметров тега META

Параметр CONTENT

Описание
content устанавливает значение параметра, заданного с помощью name или http-equiv. Параметр content может содержать более одного аргумента, в этом случае аргументы разделяются запятыми или точкой с запятой.

Синтаксис
<meta content="...">

Аргументы
Любая строка символов, которую надо взять в одинарные или двойные кавычки.

Значение по умолчанию
Нет.

Пример 2. Изменение кодировки веб-страницы

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
...
</body>
</html>

Параметр HTTP-EQUIV

Описание
Браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Синтаксис
<meta http-equiv="...">

Аргументы
Любой подходящий идентификатор. Ниже приведены некоторые допустимые аргументы параметра http-equiv.
Content-Type — тип кодировки документа.
expires — устанавливает дату и время, после которой информация в документе будет считаться устаревшей.
pragma — способ кэширования документа.
refresh — загрузить другой документ в текущее окно браузера.

Значение по умолчанию
Нет.

Пример 3. Кэширование документа до определенного срока

<html>
<head>
<meta http-equiv="expires" content="Sun, 01 Jan 2006 07:01:00 GMT">
</head>
<body>
...
</body>
</html>

Параметр NAME

Описание
Устанавливает идентификатор метатега для пары имя/значение. Одновременно использовать параметры name и http-equiv не допускается.

Синтаксис
<meta name=...>

Аргументы
Любой подходящий идентификатор. Ниже приведены некоторые допустимые аргументы параметра name.
author — имя автора документа.
description — описание текущего документа.
keywords — список ключевых слов, встречающихся на странице.

Значение по умолчанию
Нет.

Пример 4. Ключевые слова

<html>
<head>
<meta name="keywords" content="HTML, META, метатег, тег, поисковая система">
</head>
<body>
...
</body>
</html>


Тег NOBR

Описание
Тег NOBR уведомляет браузер отображать текст без переносов. Если этого тега в коде документа нет, а также имеются переводы строки, они игнорируются и текст выравнивается по левому краю окна браузера или родительского элемента. При этом браузер переводы строк расставляет автоматически, чтобы текст полностью поместился по ширине окна. Использование тега NOBR заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Пользователям придется прокручивать текст по горизонтали, чтобы увидеть его полностью, чего обычно делать никто не любит.

Синтаксис
<nobr>Текст</nobr>

Закрывающий тег
Обязателен.

Параметры
Нет

Пример. Использование тега NOBR

<html>
<body>
<h1><nobr>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</nobr></h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Примечание
Несмотря на то, что тег NOBR давно прижился во всех браузерах, в официальном HTML он не упоминается.


Тег NOEMBED

Описание
Тег NOEMBED предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами. Во всех остальных случаях содержимое контейнера NOEMBED будет проигнорировано.

Плагином называется подключаемый к браузеру программный модуль, расширяющий возможности браузера. Например, к плагинам можно отнести поддержку Flash, QuickTime VR, VRML и т.д.

Синтаксис
<noembed>Текст</noembed>

Закрывающий тег
Обязателен.

Параметры
Нет.

Пример. Использование тега NOEMBED

<html>
<body>

<embed src=images/logo.swf quality=high type="application/x-shockwave-flash" width=300 height=200>
</embed>
<noembed>
<h1>Браузер не поддерживает работу с плагинами</h1>
</noembed>

</body>
</html>


Тег NOFRAMES

Описание
Содержимое тега NOFRAMES отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать. Браузеры, которые работают с фреймами, полностью игнорируют содержимое тега NOFRAMES. Как правило, внутри этого тега располагается текст, информирующий пользователя о том, что его браузер фреймы не поддерживает или с предложением перейти на страницу без фреймов.

Синтаксис
<noframes>Текст</noframes>

Закрывающий тег
Обязателен.

Параметры
Нет.

Пример. Использование тега NOFRAMES

<frameset rows="10%,90%">
<frame src="top.html" name="TOP">
<frameset cols="200,*">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</frameset>

<noframes>
Ваш браузер не поддерживает фреймы.
</noframes>


Тег NOSCRIPT

Описание
Контейнер NOSCRIPT показывает свое содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях браузер игнорирует этот тег и все, что располагается внутри него.

Синтаксис
<noscript>Текст</noscript>

Закрывающий тег
Обязателен.

Параметры
Нет.

Пример. Использование тега NOSCRIPT

<html>
<head>
<script language="JavaScript">
alert("Hello, world!")
</script>

<noscript>
Ваш браузер не поддерживает скрипты!
</noscript>
</head>
<body>
...
</body>
</html>


Тег OL

Описание
Тег OL устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега LI. Если к тегу OL применяется таблица стилей, то элементы LI наследуют эти свойства.

Синтаксис
<ol>
<li>элемент нумерованного списка</li>
</ol>

Закрывающий тег
Обязателен.

Параметры
type — устанавливает вид маркера списка.
start — число, с которого будет начинаться нумерованный список.

Пример 1. Использование тега OL

<html>
<body>
<ol>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ol>
</body>
</html>

Результат примера

  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

Описание параметров тега OL

Параметр TYPE

Описание
Устанавливает вид маркера.

Синтаксис
<ol type=A | a | I | i | 1>...</ol>

Аргументы
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега OL, который и используется для создания списка. В качестве маркеров могут быть следующие значения:

  • заглавные латинские буквы;
  • прописные латинские буквы;
  • заглавные римские цифры;
  • прописные римские цифры;
  • арабские цифры.

В табл. 1 приведены различные значения параметра type тега OL и результат их применения.

Таблица 1. Параметры нумерованного списка
Код Пример
<ol type=A>
...
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=a>
...
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=I>
...
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=i>
...
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=1>
...
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

Значение по умолчанию
1

Аналог CSS
list-style-type

Пример 2. Изменение вида списка

<html>
<body>
<ol type=a>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ol>
</body>
</html>

Параметр START

Описание
Параметр start устанавливает номер, с которого будет начинаться список. При этом не имеет значения, какой тип списка установлен с помощью параметра type, аргумент start одинаково работает и с римскими и с арабскими числами.

Синтаксис
<ol start=число>...</ol>

Аргументы
Любое целое положительное число.

Значение по умолчанию
Нет.

Пример 3. Установка начального значения списка

<html>
<body>
<ol type=I start=4>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ol>
</body>
</html>


Тег OPTION

Описание
Тег OPTION определяет отдельные пункты списка, создаваемого с помощью контейнера SELECT. Ширина списка определяется самым широким текстом, указанным в теге OPTION, а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент SELECT внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Синтаксис
<form>
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
</form>

Закрывающий тег
Не обязателен.

Параметры
selected — заранее устанавливает выделенным пункт списка.
value — значение пункта списка, которое будет отправлено на сервер или прочитано с помощью сприптов.

Пример 1. Использование тега OPTION

<html>
<body>

<select size=3 name=hero>
<option selected>Выберите героя</option>
<option value=t1>Чебурашка</option>
<option value=t2>Крокодил Гена</option>
<option value=t3>Шапокляк</option>
<option value=t4>Крыса Лариса</option>
</select>

</body>
</html>

Результат примера

Описание параметров тега OPTION

Параметр SELECTED

Описание
Делает текущий пункт списка выделенным. Если у тега SELECT добавлен параметр multiple, то можно выделять более одного пункта.

Синтаксис
<option selected>...</option>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 2. Выделение пункта списка

<html>
<body>
<select name=hero>
<option selected>Выберите героя</option>
<option value=t1>Чебурашка</option>
<option value=t2>Крокодил Гена</option>
<option value=t3>Шапокляк</option>
<option value=t4>Крыса Лариса</option>
</select>
</body>
</html>

Параметр VALUE

Описание
Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара имя/значение, где имя задается параметром name тега SELECT, а значение — параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным. Также параметр value применяется для получения значений данных через скрипты.

Синтаксис
<option value=значение>...</option>

Аргументы
Любая текстовая строка заключенная в двойные или одинарные кавычки.

Значение по умолчанию
Нет.

Пример 3. Установка значения пункта списка

<html>
<head>
<script language="JavaScript">
function dataSelect(f) {
n = f.hero.selectedIndex
if(n) alert("Выбран герой: " + f.hero.options[n].value)
}
</script>
</head>
<body>

<form>
<select name=hero>
<option>Выберите героя</option>
<option value="Чебурашка">Чебурашка</option>
<option value="Крокодил Гена">Крокодил Гена</option>
<option value="Шапокляк">Шапокляк</option>
<option value="Крыса Лариса">Крыса Лариса</option>
</select>
<input type=button value="OK" onClick="dataSelect(this.form)">
</form>

</body>
</html>


Тег P

Описание
Определяет текстовый параграф. Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком. Величиной промежутка можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента.

Синтаксис
<p>Текст
<p>Текст</p>

Закрывающий тег
Не обязателен.

Параметры
align — определяет выравнивание текста.

Пример 1. Использование тега P

<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>

Описание параметров тега P

Параметр ALIGN

Описание
Выравнивание блока текста по краю.

Синтаксис
<p align=left | center | right | justify>...</p>

Аргументы
left — выравнивание текста по левому краю.
center — выравнивание по центру.
right — выравнивание по правому краю.
justify — выравнивание по ширине (одновременно по правому и левому краю).

Значение по умолчанию
left

Пример 2. Выравнивание текста

<html>
<body>
<p align=justify>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>


Тег PARAM

Описание
Тег PARAM предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов APPLET или OBJECT. Такой подход позволяет прямо в коде HTML-документа изменять характеристики апплета без его дополнительной компиляции. Количество одновременно используемых тегов PARAM может быть больше одного и для каждого из них задается пара «имя/значение» через атрибуты name и value.

Апплетом называется программа, которая выполняется с составе браузера или под управлением специальной программы для ее просмотра. Апплет, как правило, пишется на языке Java, поэтому часто можно встретить сочетание «Java-апплет».

Синтаксис
<param name=...>

Закрывающий тег
Не требуется.

Параметры
name — имя параметра.
value — значение параметра.

Пример. Использование тега PARAM

<html>
<body>

<applet CODE=animation.class WIDTH=500 HEIGHT=200>
<param name=bgcolor value=#000000>
<param name=delay value=1000>
<param name=loop value=5>
</applet>

</body>
</html>

Описание параметров тега PARAM

Параметр NAME

Описание
Определяет уникальное имя параметра. Это имя должно быть программно заложено в код апплета или объекта.

Синтаксис
<param name=имя>

Аргументы
В качестве имени используется набор символов, включая числа и буквы.

Значение по умолчанию
Нет.

Параметр VALUE

Описание
Значение параметра. Этот атрибут не является обязательным, поскольку для апплета или объекта вполне может быть достаточно одного имени, задаваемым параметром name.

Синтаксис
<param value=значение>

Аргументы
В качестве значения может быть строка или число.

Значение по умолчанию


Тег PRE

Описание
Элемент PRE определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег PRE позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега PLAINTEXT, использование которого осуждается в HTML 4, внутри контейнера PRE допустимо применять любые теги.

Следующие теги не должны размещаться внутри контейнера PRE: APPLET, BASEFONT, BIG, FONT, IMG, OBJECT, SMALL, SUB и SUP.

Синтаксис
<pre>Текст</pre>

Закрывающий тег
Обязателен.

Пример. Использование тега PRE

<html>
<body>
<pre>
-    -- ------  -¦---
-----   ------   ¦-----
¦¦----¦ ¦¦--¦¦   ---¦
¦¦-----  ----   ----¦
¦¦-----¦ ¦¦¦¦  ¦----¦-¦
¦¦ -----  --   -----¦ -
¦¦- ----¦ --  ¦-----¦¦-
¦¦---¦¦-- --  ------¦--
¦¦--¦¦ --¦-- ¦--¦------
¦¦ -¦¦ ¦--   --- - ----
¦¦ -¦¦  --¦-¦--¦ - ---¦
¦---¦¦- ¦-----¦ ¦-----
¦---¦¦   ¦----  ¦----¦
¦----¦    ---   ¦------
------         --------
</pre>
</body>
</html>

Результат примера

    -    -- ------  -¦---
    -----   ------   ¦-----
    ¦¦----¦ ¦¦--¦¦   ---¦
    ¦¦-----  ----   ----¦
    ¦¦-----¦ ¦¦¦¦  ¦----¦-¦
    ¦¦ -----  --   -----¦ -
    ¦¦- ----¦ --  ¦-----¦¦-
    ¦¦---¦¦-- --  ------¦--
    ¦¦--¦¦ --¦-- ¦--¦------
    ¦¦ -¦¦ ¦--   --- - ----
    ¦¦ -¦¦  --¦-¦--¦ - ---¦
    ¦---¦¦- ¦-----¦ ¦-----
    ¦---¦¦   ¦----  ¦----¦
    ¦----¦    ---   ¦------
    ------         --------


Тег S

Описание
Тег S отображает текст как перечеркнутый. Этот тег аналогичен тегу STRIKE, но имеет сокращенную форму записи подобно тегам B, I и U. В любом случае, теги S и STRIKE осуждаются спецификацией HTML, взамен них рекомендуется использовать стили.

Синтаксис
<s>Текст</s>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
text-decoration: line-through

Пример. Использование тега S

<html>
<body>
<b>Список должников</b><br>
<s>Чебурашка</s><br>
<s>Крокодил Гена</s><br>
Шапокляк
</body>
</html>

Результат примера

Список должников
Чебурашка
Крокодил Гена
Шапокляк


Тег SCRIPT

Описание
Тег SCRIPT предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.

SCRIPT может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Для скрытия кода программы от браузеров, которые не понимают скриптов, перед началом и после окончания кода добавляют комментарий HTML.

<script>
<!--
Текст программы
//-->
</script>

Закрывающему комментарию HTML должен предшествовать комментарий языка JavaScript (//) или VBSscript (').

В настоящее время все современные браузеры понимают скрипты, поэтому комментарий необязателен и его можно опустить.

Синтаксис
<script>
...
</script>

<script src=URL></script>

Закрывающий тег
Обязателен.

Параметры
defer — откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.
language — устанавливает язык программирования на котором написан скрипт.
src — адрес скрипта из внешнего файла для импорта в текущий документ.
type — определяет тип содержимого тега SCRIPT.

Пример 1. Использование тега SCRIPT

<html>
<body>

<table width=400 border=1>
<script language="JavaScript">
for (i=1; i<6; i++) {
document.writeln("<tr>");
for (j=1; j<6; j++) document.write("<td>" + i + j + "</td>");
document.writeln("</tr>");
}
</script>
</table>

</body>
</html>

Описание параметров тега SCRIPT

Параметр DEFER

Описание
Параметр defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Этот параметр работает только в браузере Internet Explorer, а в остальных браузерах будет проигнорирован.

Синтаксис
<script defer>...</script>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 2. Отложенный скрипт

<html>
<head>
<script language="JavaScript" DEFER>
document.forms[0].textField.value = 17;
</script>
</head>

<body>
<form>
Введите ваш возраст<br>
<input type=text name=textField>
</form>
</body>
</html>

Параметр LANGUAGE

Описание
Параметр language указывает язык написания скрипта. Рекомендуется всегда задавать этот параметр, поскольку если браузер не распознает язык программирования, то скрипт игнорируется и не выполняется. Вместе с тем, в HTML 4.0 данный параметр осуждается, а вместо него следует применять параметр type, который указывает тип MIME для определенного языка.

Синтаксис
<script language=JavaScript | JScript | VBS | VBScript>...</script>

Аргументы
Параметр language не чувствителен к регистру и может принимать одно из четырех значений.

JavaScript — язык программирования JavaScript. К этому параметру часто еще присоединяют номер версии, например — JavaScript1.3.
JScript — разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.
VBS, VBScript — язык программирования VBScript основанный на Visual Basic. Является детищем Microsoft и поддерживается преимущественно браузером Internet Explorer.

Значение по умолчанию
JavaScript

Пример 3. Выбор языка программирования

<html>
<head>
<script language="VBScript"> VB = True </script>
<script language="JavaScript"> JS = 1; </script>
<script language="JavaScript1.1"> JS11 = 1; </script>
<script language="JavaScript1.2"> JS12 = 1; </script>
<script language="JavaScript1.3"> JS13 = 1; </script>
<script language="JavaScript1.4"> JS14 = 1; </script>
<script language="JavaScript1.5"> JS15 = 1; </script>

<script language="JavaScript">
document.write("<b>Поддерживаемые языки:</b><br>");
if(window.JS) document.write("JavaScript<br>");
if(window.JS11) document.write("JavaScript 1.1<br>");
if(window.JS12) document.write("JavaScript 1.2<br>");
if(window.JS13) document.write("JavaScript 1.3<br>");
if(window.JS14) document.write("JavaScript 1.4<br>");
if(window.JS15) document.write("JavaScript 1.5<br>");
if(window.VB) document.write("Visual Basic<br>");
</script>
</head>

<body>

</body>
</html>

Параметр SRC

Описание
Импортирует файл со скриптами из внешнего файла. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ. Файлы со скриптами JavaScript обычно имеют расширение .js и могут размещаться в любом доступном месте.

Преимуществ использования внешних файлов несколько. Внешний файл после первого обращения сохраняется в кэше браузера и при последующих вызовах загружается быстрее. Кроме того, вызываемые функции удобно править в одном месте и код проще контролировать. Это особенно актуально, когда множество веб-страниц используют одни и те же скрипты.

Синтаксис
<script src=URL>...</script>

Аргументы
В качестве значения принимается полный или относительный путь к файлу. Файл должен иметь расширение .js.

Значение по умолчанию
Нет.

Пример 4. Путь к файлу со скриптами

<html>
<head>
<script language="JavaScript" src=/scripts/browser.js></script>
</head>
<body>
...
</body>
</html>

Параметр TYPE

Описание
Указывает тип MIME для определенного языка. Поскольку некоторые браузеры не понимают параметр type, лучше задавать два атрибута одновременно - language и type. Если браузер распознает значение параметра type, то значение language отменяется.

Синтаксис
<script type=MIME-тип>...</script>

Аргументы
Параметр type не чувствителен к регистру и принимает следующие значения:
text/JavaScript — для JavaScript.
text/VBScript — для VBScript.

Значение по умолчанию
text/JavaScript

Пример 5. Установка типа данных

<html>
<head>
<script language="JavaScript" type="text/javascript">
...
</script>
</head>
<body>
...
</body>
</html>


Тег SELECT

Описание
Тег SELECT позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования параметра size тега SELECT, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге OPTION, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега OPTION, который должен быть вложен в контейнер SELECT. Если планируется отправлять данные списка на сервер, то требуется поместить элемент SELECT внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.
Список множественного выбора Раскрывающийся список

Синтаксис
<form>
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
</form>

Закрывающий тег
Обязателен.

Параметры
disabled — блокирует доступ и изменение элемента.
multiple — позволяет выбрать несколько параметров из списка.
name — имя элемента для отправки на сервер или обращения через скрипты.
size — количество отображаемых строк списка.

Пример 1. Использование тега SELECT

<html>
<body>

<select size=3 multiple name=hero>
<option selected>Выберите героя</option>
<option value=t1>Чебурашка</option>
<option value=t2>Крокодил Гена</option>
<option value=t3>Шапокляк</option>
<option value=t4>Крыса Лариса</option>
</select>

</body>
</html>

Описание параметров тега SELECT

Параметр DISABLED

Описание
Блокирует доступ и изменение элементов списка.

Синтаксис
<select disabled>...</select>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 2. Блокировка списка

<html>
<body>
<select disabled name=hero>
<option selected>Выберите героя</option>
<option value=t1>Чебурашка</option>
<option value=t2>Крокодил Гена</option>
<option value=t3>Шапокляк</option>
<option value=t4>Крыса Лариса</option>
</select>
</body>
</html>

Параметр MULTIPLE

Описание
Наличие параметра multiple сообщает браузеру отображать содержимое элемента SELECT как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше, чем число пунктов, то появляется вертикальная полоса прокрутки. Когда size=1 список превращается «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка неудобно.

Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.

Параметр size отсутствует Параметр size равен 1

Синтаксис
<select multiple>...</select>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 3. Список множественного выбора

<html>
<body>
<select multiple size=1>
<option>Чебурашка</option>
<option>Крокодил Гена</option>
<option>Шапокляк</option>
<option>Крыса Лариса</option>
</select>
</body>
</html>

Параметр NAME

Описание
Определяет уникальное имя элемента SELECT. Как правило, это имя используется для доступа к данным через скрипты.

Синтаксис
<select name=имя>...</select>

Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу SELECT по имени соблюдайте ту же форму написания, что и в параметре name.

Значение по умолчанию
Нет.

Пример 4. Обращение к элементу списка

<html>
<head>
<script language="JavaScript">
function dataSelect(f) {
n = f.hero.selectedIndex
if(n) alert("Выбран герой: " + f.hero.options[n].value)
}
</script>
</head>
<body>

<form>
<select name=hero>
<option>Выберите героя</option>
<option value="Чебурашка">Чебурашка</option>
<option value="Крокодил Гена">Крокодил Гена</option>
<option value="Шапокляк">Шапокляк</option>
<option value="Крыса Лариса">Крыса Лариса</option>
</select>
<input type=button value="OK" onClick="dataSelect(this.form)">
</form>

</body>
</html>

Параметр SIZE

Описание
Устанавливает высоту списка. Если значение параметра size равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу SELECT при size=1 список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис
<select size=число>...</select>

Аргументы
Любое положительное целое число.

Значение по умолчанию
Зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то по умолчанию значение параметра size равно 1.

Пример 5. Высота списка

<html>
<body>
<select size=1>
<option selected>Выберите героя</option>
<option>Чебурашка</option>
<option>Крокодил Гена</option>
<option>Шапокляк</option>
<option>Крыса Лариса</option>
</select>
</body>
</html>


Тег SMALL

Описание
Тег SMALL уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега SMALL уменьшает текст на одну условную единицу. Допускается применение вложенных тегов SMALL, при этом размер шрифта будет меньше с каждым вложенным уровнем, но не может быть меньше, чем 1.

На размер шрифта влияет не только заданный параметр size тега FONT, но и выбор гарнитуры шрифта. Шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Для более точного управления размером текста используйте стили.

Синтаксис
<small>Текст</small>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
font-size

Пример 1. Использование тега SMALL

<html>
<body>
<big><big>Lorem ipsum dolor sit amet</big></big><br>
<small>Lorem</small> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <small>Ut</small> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Тег SPAN

Описание
Тег SPAN предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как TABLE, P или DIV, с помощью тега SPAN можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри параграфа (тега P) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег SPAN и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.

Синтаксис
<span>...</span>

Закрывающий тег
Обязателен.

Пример. Использование тега SPAN

<html>
<head>
<style>
BODY { font-family: Arial, sans-serif }
.letter { color: red; font-size: 200%; font-family: serif; position: relative; top: 5px }
</style>
</head>
<body>
<p><span class=letter>L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p><span class=letter>U</span>t wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Результат примера

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Тег STRIKE

Описание
Тег STRIKE отображает текст как перечеркнутый. Этот тег аналогичен тегу S, который имеет сокращенную форму записи подобно тегам B, I и U. В любом случае, теги Strike и S осуждаются спецификацией HTML, взамен них рекомендуется использовать стили.

Синтаксис
<strike>Текст</strike>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
text-decoration: line-through

Пример. Использование тега STRIKE

<html>
<body>
<b>Список должников</b><br>
<strike>Чебурашка</strike><br>
<strike>Крокодил Гена</strike><br>
Шапокляк
</body>
</html>

Результат примера

Список должников
Чебурашка
Крокодил Гена
Шапокляк


Тег STRONG

Описание
Тег STRONG предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

Синтаксис
<strong>Текст</strong>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
font-weight

Пример. Использование тега STRONG

<html>
<body>
<strong>Lorem ipsum dolor sit amet</strong><br>
<strong>Lorem</strong> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <strong>Ut</strong> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Примечание
Следует отметить, что теги B и STRONG, также как I и EM, несмотря на сходство результат, являются не совсем эквивалентными и заменяемыми. Первый тег B — является тегом физической разметки и устанавливает жирный текст, а тег STRONG — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов B и STRONG, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.


Тег STYLE

Описание
Тег STYLE применяется для определения стилей элементов веб-страницы. Допускается размещать STYLE в любом месте веб-страницы. Однако если в стилях идет описание селектора BODY и других важных эементов, то необходимо тег STYLE использовать внутри контейнера HEAD. Можно использовать более чем один тег STYLE.

Некоторые старые браузеры не обрабатывают содержимое контейнера STYLE и выводят его на веб-страницу. Чтобы этого не произошло, заключите стили в комментарии HTML. Если вы делаете сайт под современные браузеры, то эту рекомендацию можно опустить, поскольку все популярные браузеры корректно работают со стилями.

Синтаксис
<head>
<style type="text/css">
...
</style>
</head>

Закрывающий тег
Обязателен.

Параметры
media — определяет устройство вывода, для работы с которым предназначена таблица стилей.
type — сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

Пример 1. Использование тега STYLE

<html>
<head>
<style type="text/css">
H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366 }
</style>
</head>

<body>
<H1>Hello, world!</H1>
</body>
</html>

Описание параметров тега STYLE

Параметр MEDIA

Описание
Устанавливает устройство вывода, для которого предназначена таблица стилей. В идеале для каждого устройства — от карманного компьютера до принтера можно определить свою собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы. Но это в идеале, пока же браузеры поддерживают только вывод на принтер и экран монитора.

Синтаксис
<style media=all | print | screen>...</style>

Аргументы
all — cтиль, предназначенный для одновременного просмотра на мониторе и вывода на печать.
print — cтиль для вывода на печать.
screen — стиль для вывода на экран монитора.

Аргументы чувствительны к регистру. Можно устанавливать сразу несколько значений, перечисляя их через запятую.

Значение по умолчанию
screen

Пример 2. Стиль для печати документа

<html>
<head>
<style type="text/css" media="screen">
.window {
background: url(/images/bg.gif);
border: 1px solid black;
font-family: Arial;
font-size: 90%;
color: #fc0;
padding: 10px

}
</style>

<style type="text/css" media="print">
.window {
border: 1px solid black;
font-family: Arial;
font-size: 90%;
font-weight: bold;
color: black;
padding: 10px

}
</style>

</head>
<body>
<div class=window>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>

Параметр TYPE

Описание
Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого параметра, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера STYLE.

Синтаксис
<style type="text/css">...</style>

Аргументы
В качестве значения используется MIME-тип — text/css.

Значение по умолчанию
text/css

Пример 3. Установка типа данных

<html>
<head>
<style type="text/css">
a:link { color: #003366 }
a:visited { color: #660066 }
a:hover { color: #800000 }
a:active { color: #FF0000 }
</style>
</head>
<body>
<a href=link1.html>Lorem ipsum dolor sit amet</a>
</body>
</html>


Тег SUB

Описание
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

Синтаксис
<sub>Нижний индекс</sub>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
vertical-align: sub

Пример. Использование тега SUB

<html>
<body>
<b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i>
</body>
</html>

Результат примера

Формула серной кислоты: H2SO4


Тег SUP

Описание
Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

Синтаксис
<sup>Верхний индекс</sup>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
vertical-align: super

Пример. Использование тега SUP

<html>
<body>
<b>Великая теорема Ферма</b><br>
<i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i><br>
где n - целое число > 2
</body>
</html>

Результат примера

Великая теорема Ферма
X n + Y n = Z n
где n - целое число > 2


Тег TABLE

Описание
Элемент TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD. Внутри TABLE допустимо использовать следующие элементы: CAPTION, COL, COLGROUP, TBODY, TBODY, TD, TFOOT, TH, THEAD и TR.

Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.

Синтаксис
<table>
...
</table>

Закрывающий тег
Обязателен.

Параметры
align — определяет выравнивание таблицы.
background — задает фоновый рисунок в таблице.
bgcolor — цвет фона таблицы.
border — толщина рамки в пикселах.
bordercolor — цвет рамки.
cellpadding — отступ от рамки до содержимого ячейки.
cellspacing — расстояние между ячейками.
cols — число колонок в таблице.
height — высота таблицы.
rules — сообщает браузеру, где отображать границы между ячейками.
width — ширина таблицы.

Пример 1. Использование тега TABLE

<html>
<body>

<table width=100% border=0 cellspacing=0 cellpadding=4>
<tr align=center bgcolor=#999999>
<td colspan=3 style="font-size: 160%; font-family: sans-serif">Lorem ipsum dolor sit amet...</td>
</tr>
<tr>
<td><img src=logo.gif width=150 height=70 border=0 style="background: #CCCC99"></td>
<td align=right><img name=Image src= width=70 height=70 style="background: #CCFF99"></td>
<td>
<li> <a href=lorem.html>Lorem</a><br>
<li> <a href=ipsum.html>Ipsum</a><br>
<li> <a href=dolar.html>Dolar</a>
</td>
</tr>
<tr>
<td colspan=3>
<table height=1 width=100% border=0 cellpadding=0 cellspacing=0 bgcolor=#333333>
<tr> <td> </td> </tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Описание параметров тега TABLE

Параметр ALIGN

Описание
Задает выравнивание таблицы по краю окна браузера.

Синтаксис
<table align=left | center | right>...</table>

Аргументы
left — выравнивание таблицы по левому краю;
center — выравнивание таблицы по центру;
right — выравнивание по правому краю;

Значение по умолчанию
left

Аналог CSS
text-align

Пример 2. Выравнивание таблицы

<html>
<body>
<table align=center width=600 bgcolor=#ffcc00>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр BACKGROUND

Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис
<table background=URL>...</table>

Аргументы
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию
Нет.

Аналог CSS
background-image

Пример 3. Фоновый рисунок для таблицы

<html>
<body>
<table background=/images/rules.gif width=600>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр BGCOLOR

Описание
Устанавливает цвет фона таблицы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку

Синтаксис
<table bgcolor=цвет>...</table>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS
background-color

Пример 4. Цвет фона таблицы

<html>
<body>
<table bgcolor=#ffcc00 width=600>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр BORDER

Описание
Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега TABLE, то вид рамки меняется в зависимости от браузера (рис. 1).

Internet Explorer | Netscape | Opera

Рис. 1. Рамка полученная с помощью параметра border

Браузер Netscape имитирует трехмерность рамки, браузер Opera вообще оставляет ее цвет без изменения, а Internet Explorer делает рамку сплошной.

Когда в теге TABLE используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.

При совместном использовании параметров border, bordercolor и cellspacing можно получить двойную рамку.

Синтаксис
<table border=толщина>...</table>

Аргументы
Любое положительное целое число.

Значение по умолчанию
0

Аналог CSS
border

Пример 5. Толщина границы в таблице

<html>
<body>
<table bordercolor=#ffcc00 cellspacing=2 border=1 cellpadding=5 width=600>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр BORDERCOLOR

Описание
Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу TABLE создают однотонную линию.

Синтаксис
<table bordercolor=цвет>...</table>

Аргументы
См. параметр BGCOLOR.

Значение по умолчанию
Зависит от браузера и операционной системы.

Аналог CSS
border-color

Пример 6. Цвет границы

<html>
<body>
<table bordercolor=red border=2 width=100%>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр CELLPADDING

Описание
Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

Синтаксис
<table cellpadding=значение>...</table>

Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию
0

Пример 7. Поля вокруг содержимого ячеек

<html>
<body>
<table cellpadding=7 border=2 bordercolor=red width=100%>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр CELLSPACING

Описание
Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет.

Синтаксис
<table cellspacing=значение>...</table>

Аргументы
Любое целое положительное число.

Значение по умолчанию
0 (когда нет параметра border)
2 (когда параметра border установлен)

Пример 8. Расстояние между ячейками

<html>
<body>
<table cellspacing=5 cellpadding=10 border=1 bordercolor=red width=100%>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр COLS

Описание
Параметр cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого параметра таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование параметра cols позволяет несколько ускорить отображение содержимого таблицы.

Синтаксис
<table cols=число>...</table>

Аргументы
Любое целое положительное число.

Значение по умолчанию
Нет.

Пример 9. Число столбцов в таблице

<html>
<body>
<table width=700 cellspacing=0 border=1 bordercolor=black cols=10>
<tr>
<td>&nbsp;</td>
<td>1995</td><td>1996</td><td>1997</td><td>1998</td>
<td>1999</td><td>2000</td><td>2001</td><td>2002</td>
<td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>
</body>
</html>

Параметр HEIGHT

Описание
Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега TABLE.

Синтаксис
<table height=значение>...</table>

Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию
Высота вычисляется на основе содержимого таблицы.

Аналог CSS
height

Пример 10. Высота таблицы

<html>
<body>
<table cellpadding=10 bgcolor=#ffcc00 align=center width=50% height=50%>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр RULES

Описание
Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. Толщина границы и ее цвет указывается с помощью параметров border и bordercolor.

Синтаксис
<table rules=значение>...</table>

Аргументы
all — граница отображается вокруг каждой ячейки.
cols — граница отображается только между колонками, определяемыми тегами COL и COLGROUP.
group — граница отображается между группами, которые задаются с помощью тегов THEAD, TFOOT, TBODY, COLGROUP или COL.
none — скрывает все границы.
rows — граница отображается между строками таблицы.

Значение по умолчанию
none (когда border=0);
all (когда значение параметра border отлично от нуля).

Пример 11. Граница между колонками таблицы

<html>
<body>
<table width=550 cellpadding=2 cellspacing=0 border=1 bordercolor=black rules=groups>
<colgroup width=100>
<colgroup span=9 align=center width=50>
<col span=5 bgcolor=#c0c0c0>
<col span=4 bgcolor=#ffffdd>
</colgroup>
<tr>
<td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
<td>1998</td><td>1999</td><td>2000</td><td>2001</td>
<td>2002</td><td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>
</body>
</html>

Параметр WIDTH

Описание
Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

Синтаксис
<table width=значение>...</table>

Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию
Ширина вычисляется на основе содержимого таблицы.

Аналог CSS
width

Пример 12. Ширина таблицы

<html>
<body>
<table cellpadding=10 border=1 bordercolor=red width=80%>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>


Тег TD

Описание
Предназначен для создания одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.

Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>

Закрывающий тег
Не обязателен.

Параметры
align — определяет выравнивание содержимого ячейки по горизонтали.
background — задает фоновый рисунок в ячейке.
bgcolor — цвет фона ячейки.
bordercolor — цвет рамки.
colspan — объединяет горизонтальные ячейки.
height — высота ячейки.
nowrap — запрещает перенос строк.
rowspan — объединяет вертикальные ячейки.
valign — выравнивание содержимого ячейки по вертикали.
width — ширина ячейки.

Пример 1. Использование тега TD

<html>
<body>

<table border=0 cellpadding=7 cellspacing=0>
<tr>
<td colspan=2 bgcolor=#D3EDF6 align=center> ... </td>
</tr>
<tr>
<td valign=top align=center> ... </td>
<td width="98%" valign=top> ... </td>
</tr>
</table>

</body>
</html>

Описание параметров тега TD

Параметр ALIGN

Описание
Задает выравнивание содержимого ячейки по горизонтали.

Синтаксис
<td align=left | center | right>...</td>

Аргументы
left — выравнивание по левому краю.
center — выравнивание по центру.
right — выравнивание по правому краю.

Значение по умолчанию
left

Аналог CSS
text-align

Пример 2. Выравнивание содержимого ячейки

<html>
<body>
<table width=600 border=1>
<tr>
<td align=center> ... </td>
<td align=center> ... </td>
</tr>
</table>
</body>
</html>

Параметр BACKGROUND

Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым ячейки. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис
<td background=URL>...</td>

Аргументы
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию
Нет.

Аналог CSS
background-image

Пример 3. Фоновый рисунок для ячейки

<html>
<body>
<table width=600>
<tr>
<td background=/images/rules.gif> ... </td>
</tr>
</table>
</body>
</html>

Параметр BGCOLOR

Описание
Устанавливает цвет фона ячейки.

Синтаксис
<td bgcolor=цвет>...</td>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS
background-color

Пример 3. Цвет фона ячейки

<html>
<body text=white>
<table bgcolor=black width=600>
<tr>
<td bgcolor=#ffcc00> ... </td>
</tr>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр BORDERCOLOR

Описание
Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега TABLE.

Синтаксис
<td bordercolor=цвет>...</td>

Аргументы
См. параметр BGCOLOR.

Значение по умолчанию
Зависит от браузера и операционной системы.

Пример 4. Цвет границы вокруг ячейки

<html>
<body>
<table bordercolor=black border=1 width=100%>
<tr>
<td bordercolor=red> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр COLSPAN

Описание
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

ячейка 1
ячейка 2 ячейка 3

Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек

В приведенной на рис.1 таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan.

Синтаксис
<td colspan=число>...</td>

Аргументы
Любое целое положительное число больше 2.

Значение по умолчанию
1

Пример 5. Объединение ячеек по горизонтали

<html>
<body>
<table width=200 border=1 align=center cellpadding=4 cellspacing=0 bordercolor=#333333>
<tr bgcolor=#FBF0DB>
<td colspan=2>ячейка 1</td>
</tr>
<tr>
<td>ячейка 2</td>
<td>ячейка 3</td>
</tr>
</table>
</body>
</html>

Параметр HEIGHT

Описание
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.

Синтаксис
<td height=значение>...</td>

Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию
Высота вычисляется на основе содержимого ячейки.

Аналог CSS
height

Пример 6. Высота ячейки

<html>
<body>
<table cellpadding=10 bgcolor=#ffcc00 align=center width=100%>
<tr>
<td height=50> ... </td>
</tr>
</table>
</body>
</html>

Параметр NOWRAP

Описание
Добавление параметра nowrap к тегу TD заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

Синтаксис
<td nowrap>...</td>

Аргументы
Нет.

Значение по умолчанию
По умолчанию параметр nowrap не установлен.

Пример 7. Запрет переносов в ячейке

<html>
<body>
<table width=400>
<tr>
<td nowrap> ... </td>
</tr>
</table>
</body>
</html>

Параметр ROWSPAN

Описание
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 2.

ячейка 1 ячейка 2
ячейка 3

Рис. 2. Пример таблицы, где используется вертикальное объединение ячеек

В приведенной на рис.2 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan.

Синтаксис
<td rowspan=число>...</td>

Аргументы
Любое целое положительное число больше 2.

Значение по умолчанию
1

Пример 8. Объединение ячеек по вертикали

<html>
<body>
<table width=200 border=1 align=center cellpadding=4 cellspacing=0 bordercolor=#333333>
<tr>
<td rowspan=2 bgcolor=#FBF0DB>ячейка 1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ячейка 3</td>
</tr>
</table>
</body>
</html>

Параметр VALIGN

Описание
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис
<td valign=top | middle | bottom | baseline>...</td>

Аргументы
top — выравнивание по верхнему краю строки.
middle — выравнивание по середине.
bottom — выравнивание по нижнему краю.
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

Значение по умолчанию
middle

Аналог CSS
vertical-align

Пример 9. Выравнивание содержимого ячеек

<html>
<body>
<table width=60%>
<tr bgcolor=#ffcc00 bordercolor=white>
<td valign=top> ... </td>
<td valign=bottom> ... </td>
</tr>
</table>
</body>
</html>

Параметр WIDTH

Описание
Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, параметр width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.

Синтаксис
<td width=значение>...</td>

Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.

Аналог CSS
width

Пример 10. Ширина ячеек

<html>
<body>
<table cellpadding=10 border=1 bordercolor=red>
<tr>
<td width=20%> ... </td>
<td width=80%> ... </td>
</tr>
</table>
</body>
</html>


Тег TEXTAREA

Описание
Поле TEXTAREA представляет собой элемент формы, для создания области, в которую можно вводить несколько строк текста. В отличие от тега INPUT в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

Синтаксис
<form>
<textarea ...>
текст
</textarea>
</form>

Закрывающий тег
Обязателен.

Параметры
cols — ширина поля в символах.
disabled — блокирует доступ и изменение элемента.
name — имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly — устанавливает, что поле не может изменяться пользователем.
rows — высота поля в строках текста.
wrap — параметры переноса строк.

Пример 1. Использование тега TEXTAREA

<html>
<body>

<form action=/cgi-bin/handler.cgi>
<b>Введите ваш отзыв:</b><br>
<textarea rows=10 cols=45></textarea>
</form>

</body>
</html>

Описание параметров тега TEXTAREA

Параметр COLS

Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис
<textarea cols=число></textarea>

Аргументы
Любое целое положительное число.

Значение по умолчанию
Зависит от настроек браузера и операционной системы.

Пример 2. Ширина поля

<html>
<body>

<form>
<textarea rows=10 cols=20></textarea>
</form>

</body>
</html>

Параметр DISABLED

Описание
Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Синтаксис
<textarea disabled></textarea>

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 3. Блокирование текстового поля

<html>
<body>

<form>
<textarea rows=10 cols=20>Активное поле</textarea>
<textarea rows=10 cols=20 disabled>Неактивное поле</textarea>
</form>

</body>
</html>

Параметр NAME

Описание
Определяет уникальное имя элемента TEXTAREA. Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

Синтаксис
<textarea name=имя></textarea>

Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу TEXTAREA по имени соблюдайте ту же форму написания, что и в параметре name.

Значение по умолчанию
Нет.

Пример 4. Обращение к полю по его имени

<html>
<head>
<script language="JavaScript">

function dataField(f) {
alert("Вы ввели: " + f.comment.value);

}

</script>
</head>
<body>

<form>
<b>Введите комментарий</b><br>
<textarea rows=10 cols=20 name=comment></textarea><br>
<input type=button value="ОК" onClick="dataField(this.form)">
</form>

</body>
</html>

Параметр READONLY

Описание
Когда к тегу TEXTAREA добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис
<textarea readonly></textarea>

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 5. Текстовое поле только для чтения

<html>
<body>

<form>
<textarea rows=10 cols=20 readonly>Поле недоступно для изменения</textarea><br>
</form>

</body>
</html>

Параметр ROWS

Описание
Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.

Синтаксис
<textarea rows=число></textarea>

Аргументы
Любое положительное число.

Значение по умолчанию
Зависит от настроек браузера и операционной системы.

Пример 6. Высота текстового поля

<html>
<body>

<form>
<textarea rows=10 cols=20></textarea>
</form>

</body>
</html>

Параметр WRAP

Описание
Параметр wrap говорит браузеру, как осуществлять перенос текста в поле TEXTAREA и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки <Enter> переносит текст на новую строку, и курсор устанавливается у левого края поля.

Синтаксис
<textarea wrap></textarea>
<textarea wrap=значение></textarea>

Аргументы
hard — При этом параметре длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие кнопки <Enter> на клавиатуре устанавливает перенос текста.
off — Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

Существуют и другие значения этого параметра, которые поддерживаются разными браузерами, но результат их использования похож на приведенные выше значения.

Значение по умолчанию
off

Пример 7. Переносы в текстовом поле

<html>
<body>

<form method=POST action=/cgi-bin/handler.cgi>
<textarea rows=10 cols=20 wrap=hard></textarea>
<p><input type=submit value="Отправить">
</form>

</body>
</html>


Тег TH

Описание
Тег TH предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег TH должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.

Синтаксис
<table>
<tr>
<th>...</th>
</tr>
</table>

Закрывающий тег
Не обязателен.

Параметры
align — определяет выравнивание содержимого ячейки по горизонтали.
background — задает фоновый рисунок в ячейке.
bgcolor — цвет фона ячейки.
bordercolor — цвет рамки.
colspan — объединяет горизонтальные ячейки.
height — высота ячейки.
nowrap — запрещает перенос строк.
rowspan — объединяет вертикальные ячейки.
valign — выравнивание содержимого ячейки по вертикали.
width — ширина ячейки.

Пример 1. Использование тега TH

<html>
<body>

<table border=0 cellpadding=7 cellspacing=0>
<tr>
<th colspan=2 bgcolor=#D3EDF6 align=center> ... </th>
</tr>
<tr>
<td valign=top align=center> ... </td>
<td width="98%" valign=top> ... </td>
</tr>
</table>

</body>
</html>

Описание параметров тега TH

Параметр ALIGN

Описание
Задает выравнивание содержимого ячейки по горизонтали.

Синтаксис
<th align=left | center | right>...</th>

Аргументы
left — выравнивание по левому краю;
center — выравнивание по центру;
right — выравнивание по правому краю;

Значение по умолчанию
left

Аналог CSS
text-align

Пример 2. Выравнивание содержимого ячейки

<html>
<body>
<table width=600 border=1>
<tr>
<th align=center> ... </th>
<th align=center> ... </th>
</tr>
</table>
</body>
</html>

Параметр BACKGROUND

Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым ячейки. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис
<th background=URL>...</th>

Аргументы
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию
Нет.

Аналог CSS
background-image

Пример 3. Фоновый рисунок для ячейки

<html>
<body>
<table width=600>
<tr>
<th background=/images/rules.gif> ... </th>
</tr>
</table>
</body>
</html>

Параметр BGCOLOR

Описание
Устанавливает цвет фона ячейки.

Синтаксис
<th bgcolor=цвет>...</th>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS
background-color

Пример 3. Цвет фона ячейки

<html>
<body text=white>
<table bgcolor=black width=600>
<tr>
<th bgcolor=#ffcc00> ... </th>
</tr>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр BORDERCOLOR

Описание
Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега TABLE.

Синтаксис
<th bordercolor=цвет>...</th>

Аргументы
См. параметр BGCOLOR.

Значение по умолчанию
Зависит от браузера и операционной системы.

Пример 4. Цвет границы вокруг ячейки

<html>
<body>
<table bordercolor=black border=1 width=100%>
<tr>
<th bordercolor=red> ... </th>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр COLSPAN

Описание
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

ячейка 1
ячейка 2 ячейка 3

Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек

В приведенной на рис.1 таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan.

Синтаксис
<th colspan=число>...</th>

Аргументы
Любое целое положительное число больше 2.

Значение по умолчанию
1

Пример 5. Объединение ячеек по горизонтали

<html>
<body>
<table width=200 border=1 align=center cellpadding=4 cellspacing=0 bordercolor=#333333>
<tr bgcolor=#FBF0DB>
<th colspan=2>ячейка 1</th>
</tr>
<tr>
<th>ячейка 2</th>
<th>ячейка 3</th>
</tr>
</table>
</body>
</html>

Параметр HEIGHT

Описание
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.

Синтаксис
<th height=значение>...</th>

Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию
Высота вычисляется на основе содержимого ячейки.

Аналог CSS
height

Пример 6. Высота ячейки

<html>
<body>
<table cellpadding=10 bgcolor=#ffcc00 align=center width=100%>
<tr>
<th height=50> ... </th>
</tr>
</table>
</body>
</html>

Параметр NOWRAP

Описание
Добавление параметра nowrap к тегу TH заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

Синтаксис
<th nowrap>...</th>

Аргументы
Нет.

Значение по умолчанию
По умолчанию параметр nowrap не установлен.

Пример 7. Запрет переносов в ячейке

<html>
<body>
<table width=400>
<tr>
<th nowrap> ... </th>
</tr>
</table>
</body>
</html>

Параметр ROWSPAN

Описание
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 2.

ячейка 1 ячейка 2
ячейка 3

Рис. 2. Пример таблицы, где используется вертикальное объединение ячеек

В приведенной на рис.2 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan.

Синтаксис
<th rowspan=число>...</th>

Аргументы
Любое целое положительное число больше 2.

Значение по умолчанию
1

Пример 8. Объединение ячеек по вертикали

<html>
<body>
<table width=200 border=1 align=center cellpadding=4 cellspacing=0 bordercolor=#333333>
<tr>
<th rowspan=2 bgcolor=#FBF0DB>ячейка 1</th>
<th>ячейка 2</th>
</tr>
<tr>
<th>ячейка 3</th>
</tr>
</table>
</body>
</html>

Параметр VALIGN

Описание
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис
<th valign=top | middle | bottom | baseline>...</th>

Аргументы
top — выравнивание по верхнему краю строки.
middle — выравнивание по середине.
bottom — выравнивание по нижнему краю.
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

Значение по умолчанию
middle

Пример 9. Выравнивание содержимого ячеек

<html>
<body>
<table width=60%>
<tr bgcolor=#ffcc00 bordercolor=white>
<th valign=top> ... </th>
<th valign=bottom> ... </th>
</tr>
</table>
</body>
</html>

Параметр WIDTH

Описание
Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, параметр width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.

Синтаксис
<th width=ширина>...</th>

Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.

Аналог CSS
width

Пример 10. Ширина ячеек

<html>
<body>
<table cellpadding=10 border=1 bordercolor=red>
<tr>
<th width=20%> ... </th>
<th width=80%> ... </th>
</tr>
</table>
</body>
</html>


Тег TITLE

Описание
Определяет заголовок документа. Элемент TITLE не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 1). Допускается использовать только один тег TITLE на документ и размещать его в контейнере HEAD.

Рис. 1. Вид заголовка в браузере Internet Explorer

Рис. 1. Вид заголовка в браузере Internet Explorer

Синтаксис
<head>
<title>Заголовок</title>
</head>

Закрывающий тег
Обязателен.

Параметры
Нет.

Пример. Использование тега TITLE

<html>
<head>
<title>htmlbook.ru - Как правильно писать заголовок страницы</title>
<head>
<body>
...
</body>
</html>

Примечание

Тег TITLE выполняет множество задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок страницы.

  • По тексту заголовка пользователь получает дополнительную информацию, что это за сайт, на котором он находится и как называется текущая страница. Не стоит думать, что достаточно в документе указать логотип сайта и проигнорировать заголовок, ведь посетитель может свернуть окно. В свернутом виде заголовок также отображается на кнопках панели задач, поэтому можно легко ориентироваться, с каким сайтом в данный момент работать, а не перелистывать их по очереди.

  • Большинство браузеров поддерживают возможность сохранения веб-страницы на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием заголовка документа. Если в тексте заголовка содержатся символы недопустимые в имени файла (\ / : * ? " < > |), они будут проигнорированы или автоматически заменены другими дозволенными символами.

  • При сохранении в разделе браузера «Избранное», адрес текущей страницы с ее заголовком помещается в список предпочитаемых ссылок. Поскольку этот список, как правило, хранится в виде отдельных файлов, к их именам также прилагается уже вышеописанное правило.

  • В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Интересно написанный заголовок, содержащий ключевые слова, привлечет больше внимания посетителей и увеличит шансы на то, что сайт посетит больше людей.


Тег TR

Описание
Тег TR служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега TH или TD.

Синтаксис
<table>
<tr>...</tr>
</table>

Закрывающий тег
Не обязателен.

Параметры
align — определяет выравнивание текста в строке.
bgcolor — цвет фона ячеек в строке.
bordercolor — цвет рамки.
valign — выравнивание содержимого ячейки по вертикали.

Пример 1. Использование тега TR

<html>
<body>

<table width=100% border=0 cellpadding=4>
<tr align=right valign=top>
<td><img src=/images/book.gif width=37 height=26></td>
<td>Lorem ipsum dolor sit amet...</td>
</tr>
</table>

</body>
</html>

Описание параметров тега TR

Параметр ALIGN

Описание
Задает выравнивание содержимого ячеек строки по горизонтали. Выравнивание осуществляется для всех ячеек в пределах одной строки. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте параметр align для тега TD или TH.

Синтаксис
<tr align=left | center | right>...</tr>

Аргументы
left — выравнивание по левому краю;
center — выравнивание по центру;
right — выравнивание по правому краю;

Значение по умолчанию
left

Аналог CSS
text-align

Пример 2. Выравнивание содержимого строки

<html>
<body>
<table width=600 border=1>
<tr align=center>
<td> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр BGCOLOR

Описание
Устанавливает цвет фона строки таблицы.

Синтаксис
<tr bgcolor=цвет>...</tr>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Зависит от браузера и его версии, обычно используется белый цвет фона.

Аналог CSS
background-color

Пример 3. Цвет фона строки

<html>
<body text=white>
<table bgcolor=black width=600>
<tr bgcolor=#ffcc00>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр BORDERCOLOR

Описание
Устанавливает цвет рамки вокруг строки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега TABLE.

Синтаксис
<tr bordercolor=цвет>...</tr>

Аргументы
См. параметр BGCOLOR.

Значение по умолчанию
Зависит от браузера и операционной системы.

Пример 4. Цвет границы вокруг строки

<html>
<body>
<table bordercolor=black border=1 width=100%>
<tr bordercolor=red>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр VALIGN

Описание
Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис
<tr valign=top | middle | bottom | baseline>...</tr>

Аргументы
top — выравнивание по верхнему краю строки.
middle — выравнивание по середине.
bottom — выравнивание по нижнему краю.
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячеек строки к одной линии.

Значение по умолчанию
middle

Пример 5. Выравнивание содержимого ячеек

<html>
<body>
<table width=60%>
<tr valign=top bgcolor=#ffcc00 bordercolor=white>
<td> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>


Тег U

Описание
Текст, выделенный с помощью тега U, отображается подчеркиванием.

Синтаксис
<u>Текст</u>

Закрывающий тег
Обязателен.

Параметры
Нет.

Аналог CSS
text-decoration: underline

Пример. Использование тега U

<html>
<body>
<u>Lorem ipsum dolor sit amet</u><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Примечание
Традиционно, подчеркивание текста используется для ссылок, поэтому к обычному тексту подчеркивание лучше не применять. В спецификации HTML 4 рекомендуется воздержаться от использования тега U, а взамен применять стили.


Тег UL

Описание
Тег UL устанавливает маркированный список. Каждый элемент списка должен начинаться с тега LI. Если к тегу UL применяется таблица стилей, то элементы LI наследуют эти свойства.

Синтаксис
<ul>
<li>элемент маркированного списка</li>
</ul>

Закрывающий тег
Обязателен.

Параметры
type — устанавливает вид маркера списка.

Пример 1. Использование тега UL

<html>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
</html>

Описание параметров тега UL

Параметр TYPE

Описание
Устанавливает вид маркера.

Синтаксис
<ul type=disc | circle | square>...</ul>

Аргументы
Для маркированного списка маркеры могут принимать один из трех видов: круг, окружность и квадрат. Значения параметра type и получаемый вид показан в табл. 1.

Таблица 1. Параметры маркированного списка
Код | Пример
<ul type=disс> ... </ul> | Чебурашка Крокодил Гена Шапокляк
<ul type=circle> ... </ul> | Чебурашка Крокодил Гена Шапокляк
<ul type=square> ... </ul> | Чебурашка Крокодил Гена Шапокляк

Значение по умолчанию
disc

Аналог CSS
list-style-type

Пример 2. Изменение вида маркеров

<html>
<body>
<ul type=square>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
</html>


Тег WBR

Описание
При использовании тега NOBR, который запрещает переносы текста, с помощью тега WBR можно указать браузеру место, где допускается делать перенос строки, если этого требует ширина родительского элемента.

Синтаксис
<nobr>Текст<wbr> текст</nobr>

Закрывающий тег
Не требуется.

Параметры
Нет.

Пример. Использование тега WBR

<html>
<body>
<h1><nobr>Lorem ipsum dolor sit amet<wbr>, consectetuer adipiscing elit</nobr></h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Примечание
Вв официальном HTML теги WBR и NOBR не упоминаются, несмотря на то, что эти теги давно прижились во всех браузерах.


Впервые на русском языке появилась книга, которая полностью посвящена актуальной, но мало раскрытой теме — как сделать веб-страницы, чтобы их содержимое отображалось на экране быстро для читателя. Приемы верстки с помощью слоев, таблиц, фреймов, работа с графикой и скриптами — все это вы найдете в книге «Ускорение работы сайта».

Автор Влад Мержевич, 2005 г, 384 с. Издательство BHV-Санкт-Петербург

Справочник по тегам HTML

Термин HTML представляет собой сокращение от HyperText Markup Language — язык разметки гипертекста. В основном, HTML-документ является простым текстовым файлом, который содержит текст и ничего больше. Так что создавать веб-страницы можно в любом текстовом редакторе.

Теги

Когда веб-страница открывается в браузере, он просматривает код HTML, находит специальные символы, называемые тегами, и использует их для вставки изображений, изменения вида текста, создания ссылок на другие веб-страницы и т.д.

Для обозначения тегов используется символ <тег>. Теги бывают двух видов: парные, которые выделяют блок текста, также называются еще контейнером и одиночные. Контейнер требует закрывающего тега, обозначаемого </тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.

Поскольку одновременно можно использовать любое разумное сочетание тегов, следует помнить об их вложенности. Один контейнер должен находиться внутри другого, и никак не пересекаться.

Пояснения

Для каждого тега приводится его описание, синтаксис написания, значение по умолчанию, а также параметры тега. Кроме того, указывается, требуется закрывающий тег или нет, и дан пример использования тега.

Описание

В описании приводится назначение тега и его особенности.

Синтаксис

Синтаксис задает, как корректно писать тег и его параметры. При описании синтаксиса применяются следующие обозначения:

  • вертикальная черта между значениями (например, absmiddle | baseline) указывает на логическое исключающее ИЛИ, это означает, что надо выбрать только один аргумент из предложенных;
  • многоточие внутри тега (например, <iframe ...>) говорит о том, что для тега существуют дополнительные параметры;
  • многоточие между открывающим и закрывающим тегом сообщает, что внутри контейнера допустимо применять любые другие элементы HTML.

Закрывающий тег

Указывает, нужен закрывающий тег или нет. Возможны три варианта.

  • Обязателен — закрывающий тег обязательно должен присутствовать, иначе это вызовет ошибку в коде.
  • Не обязателен — в этом случае разработчик сам решает, ставить закрывающий тег или нет. Если тег не закрыт, то он автоматически закрывается при начале следующего элемента.
  • Не требуется — закрывающий тег никогда не указывается.

Параметры

Приводится описание каждого параметра, его допустимые значения и пример, где показано использование параметра тега. В большинстве случаев дан результат примера, что позволяет наглядно понять, как действует тот или иной параметр.

Примечание

Примечание служит для пояснения работы тега в некоторых браузерах, отношения к тегу спецификации HTML или для раскрытия дополнительных возможностей.

Значение по умолчанию

Если какой-либо параметр тега не указан явно, то браузер, тем не менее, самостоятельно применяет его со значением, которое установлено по умолчанию. Подобные аргументы не всегда являются оптимальными, поэтому их можно переназначить, если напрямую указать параметр с желаемым значением.

Поддержка

Ваши замечания, предложения и вопросы направляйте автору на адрес электронной почты vlad@htmlbook.ru
Множество материалов и примеров, связанных с темой справочника можно посмотреть в Интернете на сайте автора по адресу www.htmlbook.ru